vue3 + element-plus 用 image-conversion 插件以及 canvas 在上传前对图片进行压缩处理

自动上传

image-conversion NPM 地址

安装插件

npm i image-conversion --save 

利用before-upload钩子函数，在上传之前用image-conversion插件的 compressAccurately 方法对图片进行压缩处理。

手动上传

手动上传需将 el-upload 组件的auto-upload属性设置为 false，这样before-upload钩子便失效了。这时可以用on-change钩子函数代替：

因为有批量上传的情况，注意这个钩子是传了几个文件就触发几次的，我们也可以在提交表单时再去对图片文件进行压缩处理。

同时 image-conversion 是异步返回结果，无法接收，我们需要换一个方式，利用 canvas 画布对图片进行压缩：
其核心原理就是把一张大的图片，直接画在一张小小的画布上。此时大图片就变成了小图片，压缩就这么实现了。

canvas的drawImage API：CanvasRenderingContext2D.drawImage()

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image：即需绘制到上下文的图片元素。允许任何的 canvas 图像源(CanvasImageSource)，可以是页面上获取的 DOM 对象，也可以是虚拟 DOM 中的图片对象 (我们的上传操作就是虚拟 DOM 对象，并没有真正绘制到页面上)。
dx, dy, dWidth, dHeight：
表示在 canvas 画布上规划处一片区域用来放置图片，dx, dy分别为目标 canvas元素的左上角X 、Y轴坐标坐标，dWidth, dHeight表示canvas元素上用于显示图片的区域大小，允许对绘制的 image 进行缩放。
如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。

实际操作很简单，比如需要把一张图片的尺寸缩放为400*200大小：

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200; 
// 核心 js
ctx.drawImage(img, 0, 0, 400, 200)

那如何把 canvas 画布转换成 img 图像呢，canvas提供了2个转图片的方法：

1. canvas.toDataURL(type, quality)
   API 地址：HTMLCanvasElement.toDataURL()
   把图片转换成 base64 格式信息，纯字符的图片表示法。

• type： 图片格式，默认image/png
• quality：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以在 0 到 1 的区间选择图片的质量。如果超出取值范围，将会使用默认值 0.92。

2. toBlob(callback, type, quality)：
   API 地址：HTMLCanvasElement.toBlob()
   把 canvas 转换成 Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。

• callback：回调函数，转换好的 Blob 对象。如果图像未被成功创建，可能会获得 null 值。
• type和quality：和toDataURL()的参数一致

和toDataURL()方法相比，toBlob()方法是异步的，因此多了个callback参数。异步意味着不可控性，那么如果我们需要的上传格式是Blob，可以通过先转成dataURL，再把dataURL转成Blob的处理方式。

现在来看看具体代码怎么实现“图片→canvas压缩→图片”这个过程：

简单整理下思路：

1. 首先拿到图片资源，用 FileReader 去读取，读的过程中用readAsDataURL方法把 File 转成dataURL（base64编码字符串）
2. 读取成功触发 reader 的 load 事件，此时把dataURL赋值给创建的空new Image()的src
3. image 开始加载，触发 image 的 onload 事件，在此处进行压缩，再将压缩完的值返回过来。
4. 具体压缩过程是用 canvas 在虚拟 DOM 中经过算法按比例绘制图片，然后
   将绘制完的 canvas 转成 dataURL，再把 dataURL 转成 Blob
5. 接着把 Blob append 到 FormData 实例对象上（如有需要，可以在拿到到压缩完的Blob 结果后，再将其转换为 File）

下面把具体代码贴一下（省略无关部分）：

封装的压缩方法js：

// `src/utils/compress.js`
export function dataURLToBlob(dataUrl) {
  let arr = dataUrl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bytes = window.atob(arr[1]) // 去掉url的头，并转换为byte
  var n = bytes.length
  var u8arr = new Uint8Array(n)
  while (n--) { // 将图像数据逐字节放入Uint8Array中
    u8arr[n] = bytes.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

export const compress = (img, option, Orientation) => {
  const options = option || {}
  const { width, height, quality } = options
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  let initSize = img.src.length
  let w = width || img.width
  let h = height || img.height
  // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
  let ratio
  if ((ratio = (w * h) / 4000000) > 1) {
    ratio = Math.sqrt(ratio)
    w /= ratio
    h /= ratio
  } else {
    ratio = 1
  }

  canvas.width = w
  canvas.height = h
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, w, h)

  // 瓦片canvas
  const tCanvas = document.createElement('canvas')
  const tctx = tCanvas.getContext('2d')

  let count
  if ((count = (w * h) / 1000000) > 1) {
    // 如果图片像素大于100万则使用瓦片绘制
    console.log('超过100W像素')
    count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
    // 计算每块瓦片的宽和高
    let nw = ~~(w / count)
    let nh = ~~(h / count)
    tCanvas.width = nw
    tCanvas.height = nh
    for (let i = 0; i < count; i++) {
      for (let j = 0; j < count; j++) {
        tctx.drawImage(
          img,
          i * nw * ratio,
          j * nh * ratio,
          nw * ratio,
          nh * ratio,
          0,
          0,
          nw,
          nh
        )
        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
      }
    }
  } else {
    ctx.drawImage(img, 0, 0, w, h)
  }
  //修复 ios上传图片的时候 被旋转的问题
  if (Orientation != '' && Orientation != 1) {
    switch (Orientation) {
      case 6: //需要顺时针（向左）90度旋转
        rotateImg(img, 'left', canvas)
        break
      case 8: //需要逆时针（向右）90度旋转
        rotateImg(img, 'right', canvas)
        break
      case 3: //需要180度旋转
        rotateImg(img, 'right', canvas) //转两次
        rotateImg(img, 'right', canvas)
    }
  }
  // 进行最小压缩
  // canvas.toDataURL(type, encoderOptions);
  // type： 图片格式 image/png
  // encoderOptions：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以在 0 到 1 的区间选择图片的质量。
  // 如果超出取值范围，将会使用默认值 0.92。
  let newImg = canvas.toDataURL('image/jpeg', quality || 0.3)
  console.log('压缩前：' + initSize)
  console.log('压缩后：' + newImg.length)
  console.log('ndata:' + newImg)

  console.log(
    '压缩率：' + ~~((100 * (initSize - newImg.length)) / initSize) + '%'
  )
  // return new File([blob], file.name, { type: file.mime }) // 如果是返回 File
  // 默认返回 Blob 格式，兼容性较好
  // newImg = base64UrlToBlob(newImg)
  newImg = dataURLToBlob(newImg)

  tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
  return newImg
}

/** 图片压缩，默认为同比例压缩
 *  @param {file} 接受文件数组或单个文件(图片对象)
 *  @param {option} 指定压缩的配置参数， width｜ height｜ quality
 *  回调函数 callback 参数为 base64 字符串图片数据数组
 */
export function compressFile(file, option, callback) {
  const reader = new FileReader()
  const image = new Image()

  // 异步读取传入的 Blob 或 File 对象，【读取成功】会触发 reader 的 load 事件
  reader.readAsDataURL(file)

  // 读取到图片数据保存在 event.target 的 result属性中
  reader.onload = function (event) {
    // 数据格式是 data:URL字符串（base64编码）
    image.src = event.target.result
  }

   return new Promise((resolve, reject) => {
    image.onload = () => {
      resolve(compress(image, option))
    }
  })
}

批量上传组件：

参考：
前端JS利用canvas的drawImage()对图片进行压缩
vue下实现input实现图片上传，压缩，拼接以及旋转