Javascript | Vue.js Compress Image File Client Side

Hallo, 😆 . Upload dan download adalah aktifitas yang umum terjadi di aplikasi web base, sebuah aplikasi web base untuk dapat menyimpan file yang di upload membutuhkan sebuah penyimpanan(storage). Ada beberapa hal yang butuh di perhatikan saat kita membuat aplikasi untuk upload file, karena yang melakukan upload file adalah pengguna. Terkadang pengguna melakukan upload file dengan size yang sangat besar dan bisa berakibat storage cepat penuh. Beberapa hal yang bisa di lakukan programer sebagai pembuat aplikasi;

• Membatasi file yang akan di upload oleh pengguna.

Membatasi kapasitas/size file yang akan di upload oleh pengguna bisa menjadi solusi untuk menghemat kapasitas storage, tetapi terkadang ada user/pengguna yang di nyaman akan batasan ini.

• Melakukan Compress sebelum proses upload di sisi pengguna.

Programer menyiapkan function untuk compress file image agar file akan terkompres saat user selesai memilih file image, sehingga file image yang di upload dengan kapasitas yang sesuai di tetapkan, dan bisa mengehemat kapasitas srorage.

Meyiapkan function compress sebelum file di upload.

// Menyiapkan data untuk compress file

data() {
    return {
      FULL_IMAGE: {
        maxDimension: 1280,
        quality: 0.9
      },
      THUMB_IMAGE: {
        maxDimension: 640,
        quality: 0.7
      }
    }
  },

Membuat function

methods: {
    async ImageProfile(files){
      console.log(files)
      if(files[0]){
        // Compress File Disini
        const file = files[0]
        const fullImageResizePromise = new Promise((resolve, reject) => {
          this.generateVariation(file, this.FULL_IMAGE.maxDimension, this.FULL_IMAGE.quality, resolve)
        })
        const images = await Promise.all([fullImageResizePromise])
//Proses Upload Di Sini
        this.doUploadPhoto(images[0])
      }
    },generateVariation (file, maxDimension, quality, cb) {
      const displayPicture = (url) => {
        const image = new Image()
        image.src = url
        image.onload = () => {
          const canvas = this.getScaledCanvas(image, maxDimension)
          canvas.toBlob(cb, 'image/jpeg', quality)
        }
      }

      const reader = new FileReader()
      reader.onload = e => displayPicture(e.target.result)
      reader.readAsDataURL(file)
    },
    getScaledCanvas (image, maxDimension) {
      const scaledCanvas = document.createElement('canvas')

      if (image.width > maxDimension || image.height > maxDimension) {
        if (image.width > image.height) {
          scaledCanvas.width = maxDimension
          scaledCanvas.height = (maxDimension * image.height) / image.width
        } else {
          scaledCanvas.width = (maxDimension * image.width) / image.height
          scaledCanvas.height = maxDimension
        }
      } else {
        scaledCanvas.width = image.width
        scaledCanvas.height = image.height
      }
      scaledCanvas
        .getContext('2d')
        .drawImage(
          image,
          0,
          0,
          image.width,
          image.height,
          0,
          0,
          scaledCanvas.width,
          scaledCanvas.height
        )
      return scaledCanvas
    },
},

semoga membantu.