compression(file, size = 20, device = 4) {
      if (file[0]) {
        return Promise.all(Array.from(file).map(e => Vue.prototype.$compression(e, size))) // 如果是 file 陣列返回 Promise 陣列
      } else {
        return new Promise((resolve) => {
          const reader = new FileReader() // 建立 FileReader
          reader.
 
onload = ({ target: { result: src }}) => {
            const fileSize = Number((file.size / 1024).toFixed(2))
            if (fileSize <= size) {
              resolve({
              	file: file,
              	origin: file,
              	beforeSrc: src,
              	afterSrc: src,
              	beforeKB:
 
 fileSize + 'KB', afterKB: fileSize + 'KB',
              	detail: [], quality: null })
            } else {
              const image = new Image() // 建立 img 元素
              image.onload = async() => {
                const canvas = document.createElement('canvas') // 建立 canvas 元素
                canvas.
 
width = image.width
                canvas.height = image.height
                canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height)
                // 繪製 canvas
                let canvasURL, miniFile
                let L = true
                let quality = 0
                const detail = []
                let start = Date.now()
                for (let i = 1; i <= device; i++) {
                  canvasURL= canvas.toDataURL('image/jpeg', L ? (quality += 1 / (2 ** i)) : (quality -= 1 / (2 ** i)))
                  const buffer = atob(canvasURL.split(',')[1])
                  let length = buffer.length
                  const bufferArray = new Uint8Array(new ArrayBuffer(length))
                  while (length--) {
                    bufferArray[length] = buffer.charCodeAt(length)
                  }
                  miniFile = new File([bufferArray], file.name, { type: 'image/jpeg' });
                  (miniFile.size / 1024) > size ? L = false : L = true
                  detail.push({
                    quality,
                    size: miniFile.size,
                    kb: Number((miniFile.size / 1024).toFixed(2)),
                    time: Date.now() - start
                  })
                  start = Date.now()
                }
                resolve({
                  detail,
                  quality,
                  file: miniFile,
                  origin: file,
                  beforeSrc: src,
                  afterSrc: canvasURL,
                  beforeKB: Number((file.size / 1024).toFixed(2)),
                  afterKB: Number((miniFile.size / 1024).toFixed(2))
                })
              }
              image.src = src
            }
          }
          reader.readAsDataURL(file)
        })
      }
    }

返回結果

{
	afterKB: 壓縮後的大小
	afterSrc: 壓縮後的base url
	beforeKB：壓縮前大小
	beforeSrc：壓縮前的base url
	file：壓縮後的檔案
	origin：壓縮前的檔案

	quality含義請參考原文連結

}

作用於jpg圖片

原文連結