js图片压缩

最近又遇到移动前端图片压缩的需求，用的是vant的uploader文件上传组件，js做前置图片压缩处理，总结如下：

1. Uploader组件的before-read函数中，对文件做检验和压缩
2. 将文件转为图片对象，然后获取图片的宽高
3. 在canvas上重新以新的宽高等比例缩小绘制
4. canvas转二进制文件转文件返回

vant的话就是用这个组件了

组件里文件上传后的格式如下

可以看到我这个图片的 大小是25545105字节，大概24MB

---

校验和压缩的代码

const asyncBeforeRead = (file) =>
  new Promise((resolve, reject) => {
    if (!file.type.startsWith('image/')) {
      // 非图片文件
      Toast('请上传图片');
      reject();
    } else {
      // 文件压缩, imgCompress方法往下看
      imgCompress(file)
        .then(f => {
          resolve(f);
        })
    }
  });

---

重点：对文件进行重绘压缩处理

/**
 * @name 文件压缩
 * @description
 *  1、将文件转img对象
 *  2、获取文件宽高比例
 *  3、自定义等比例缩放宽高属性，这里我用的是固定800宽度，高度是等比例缩放
 *  4、canvas重新绘制图片
 *  5、canvas转二进制对象转文件对象，返回
 * @returns { File } 文件
 */
function imgCompress () {
  // 将文件转img对象
  const img = await fileToImg(file)
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    // 获取文件宽高比例
    const { width: originWidth, height: originHeight } = img
    // 自定义等比例缩放宽高属性，这里我用的是固定800宽度，高度是等比例缩放
    const scale = +(originWidth / originHeight).toFixed(2) // 比例取小数点后两位)
    const targetWidth = 800 // 固定宽
    const targetHeight = Math.round(800 / scale) // 等比例缩放高

    canvas.width = targetWidth
    canvas.height = targetHeight
    context.clearRect(0, 0, targetWidth, targetHeight)
    // canvas重新绘制图片
    context.drawImage(img, 0, 0, targetWidth, targetHeight)
    // canvas转二进制对象转文件对象，返回
    const type = 'image/png'
    canvas.toBlob(function (blob) {
      const f = new File([blob], file.name, {
        type,
        lastModified: file.lastModified
      })
      resolve(f)
    }, type)
  })
}

// file转换成img对象
function fileToImg (file) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const reader = new FileReader()
    reader.onload = function (e) {
      img.src = e.target.result
    }
    reader.onerror = function (e) {
      reject(e)
    }
    reader.readAsDataURL(file)
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function (e) {
      reject(e)
    }
  })
}

压缩之后可以看到文件大小只有1MB了