前端性能优化-对图片进行后压缩发向后端

思路是使用filereader读取input的上传的图片,返回一个base64

传到img实例，绘制到canvas上并通过toDataURL方法进行压缩

获取到返回的base64文件，我们接口要传file类型，所以转为file类型塞到formdata里

 

1、压缩函数，传入两个参数，file类型图片和回调函数

compressImg (file, callback) {
      let fileSize = parseFloat(parseInt(file.size) / 1024 / 1024).toFixed(2)
      let read = new FileReader()
      // 读取一个blob或者file类型，返回一个所读文件的base64
      read.readAsDataURL(file)
      // 读取文件操作完成是触发的事件
      read.onload = function (e) {
        // 创建实例
        let img = new Image()
        img.src = e.target.result
        // 图片加载完成后执行的事件
        img.onload = function () {
          
          let w = img.width
          let h = img.height
          // 创建canvas实例
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')
          let base64
          // 添加属性
          canvas.width = w
          canvas.height = h
          // 绘制于canvas
          ctx.drawImage(img, 0, 0, w, h)

          if (fileSize < 1) {
            // 如果图片小于一兆 压缩质量为0.7
            base64 = canvas.toDataURL(file.type, 0.7)
          } else if (fileSize > 1 && fileSize < 2) {
            // 如果图片大于1M并且小于2M 那么压缩质量为0.5
            base64 = canvas.toDataURL(file.type, 0.5)
          } else {
            // 如果图片超过2m 那么压缩质量为0.2
            base64 = canvas.toDataURL(file.type, 0.3)
          }

          callback(base64)
        }
      }
    }

 2、将base64 的图片转换成file类型函数--参数为base64类型的图片,file类型的图片

    base64ToFile (data, file) {
      // 对base64进行解码
      let text = window.atob(data.split(',')[1])
      // 创建一个二进制数据缓冲区实例
      let buffer = new ArrayBuffer(text.length)
      // 类型数组对象
      let ubuffer = new Uint8Array(buffer)

      for (let i = 0; i < text.length; i++) {
        // 返回指定位置的编码
        ubuffer[i] = text.charCodeAt(i)
      }

      let blob = new window.Blob([buffer], {type: file.type})

      let files = new window.File([blob], file.name, {type: file.type})

      return files
    }

3、发送请求

uploadImg (file, key) {
      this.$dialog.loading.open('图片上传中')
      // 压缩的回调函数
      this.compressImg(file, item => {
        let newFile = this.base64ToFile(item, file)
        console.log('压缩前的大小', file.size)
        console.log('压缩后的大小', newFile.size)
        console.log('压缩前的file', file)
        console.log('压缩后的file', newFile)
        let formdata = new FormData()
        formdata.append('file', newFile)
        。。。发送网络请求。。。

})}

4、完成