前端实现图片压缩无非就是在用户上传图片文件后, 将file转换成image对象, 然后再利用canvas 及其 api 将图片压缩成指定体积. 如下流程:
    前端上传图片压缩方案 - 图1

    首先我们先实现将file转换成image对象, 这里我们用到了FileReader API, 代码如下:

    1. // 压缩前将file转换成img对象
    2. function readImg(file:File) {
    3.     return new Promise((resolve, reject) => {
    4.      const img = new Image()
    5.      const reader = new FileReader()
    6.      reader.onload = function(e:any) {
    7.       img.src = e.target.result
    8.      }
    9.      reader.onerror = function(e) {
    10.       reject(e)
    11.      }
    12.      reader.readAsDataURL(file)
    13.      img.onload = function() {
    14.       resolve(img)
    15.      }
    16.      img.onerror = function(e) {
    17.       reject(e)
    18.      }
    19.     })
    20. }

    这里使用 promise 来设计生成图片数据的方法, 接下来我们看看核心的图片压缩源码:

    1. /**
    2.  * 压缩图片
    3.  * @param img 被压缩的img对象
    4.  * @param type 压缩后转换的文件类型
    5.  * @param mx 触发压缩的图片最大宽度限制
    6.  * @param mh 触发压缩的图片最大高度限制
    7.  * @param quality 图片质量
    8.  */
    9.  function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) {
    10.     return new Promise((resolve, reject) => {
    11.      const canvas = document.createElement('canvas')
    12.      const context = canvas.getContext('2d')
    13.      const { width: originWidth, height: originHeight } = img
    14.      // 最大尺寸限制
    15.      const maxWidth = mx
    16.      const maxHeight = mh
    17.      // 目标尺寸
    18.      let targetWidth = originWidth
    19.      let targetHeight = originHeight
    20.      if (originWidth > maxWidth || originHeight > maxHeight) {
    21.       if (originWidth / originHeight > 1) {
    22.        // 宽图片
    23.        targetWidth = maxWidth
    24.        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
    25.       } else {
    26.        // 高图片
    27.        targetHeight = maxHeight
    28.        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
    29.       }
    30.      }
    31.      canvas.width = targetWidth
    32.      canvas.height = targetHeight
    33.      context?.clearRect(0, 0, targetWidth, targetHeight)
    34.      // 图片绘制
    35.      context?.drawImage(img, 0, 0, targetWidth, targetHeight)
    36.      canvas.toBlob(function(blob) {
    37.       resolve(blob)
    38.      }, type || 'image/png', quality) 
    39.     })
    40. }

    这里通过控制 canvas的宽高, 以及对 canvas 的 toBlob设置参数, 来实现自定义的图片压缩.