js 圖片壓縮

代碼如下：

compressImage(file) {
      // 參數file,是通過input 選擇本地文件獲取的
      return new Promise((resolve, reject) => {
        const { type, name } = file.file
        let img = new Image()
        // 創建一個reader實例
        let reader = new FileReader()

        // 讀取拿到的文件
        reader.readAsDataURL(file.file)
        reader.onload = function(e) {

          // 文件加載成功后去轉成Img對象，為了拿到圖片的原始寬高
          img.src = e.target.result
          img.onload = function() {
            // 創建畫布canvas
            let canvas = document.createElement('canvas')
            let content = canvas.getContext('2d')

            // 設置畫布的寬高
            canvas.width = img.width  // 需要壓縮到的圖片寬度
            canvas.height = img.width * (img.height / img.width)

            // 將圖片畫在畫布上
            content.drawImage(img, 0, 0, canvas.width, canvas.height)

            //畫布轉成blob格式的圖片
            canvas.toBlob(function(blob) {
              // blob 格式的圖片 轉成file對象，這里主要看接口支不支持blob格式的文件上傳，如果支持就沒有必要轉
              let file = new File([blob], name, { type: type })
              resolve({type: type, compressFile: file})
            }, `image/${type.split('/')[1]}`, 0.7)  // 0.7 是文件壓縮程度
          }
        }
      })
    },

有問題可以評論哦