canvas压缩图片大小和宽高

1. 压缩代码

1.1 将file文件转化为base64

/**
 * @param {file} 二进制文件流 
 * @param {cb} 回调函数
 */
function changeFileToBaseURL(file, cb) {
  // 创建读取文件对象
  var fileReader = new FileReader()
  // 读取file文件,得到的结果为base64位
  fileReader.readAsDataURL(file)

  fileReader.onload = function() {
    cb && cb(this.result)
  }
}

1.2 将base64转换为二进制文件流

/**
 * @param {dataurl} base64Url
 * @param {filename} 文件名称 
*/
function dataURLtoFile(dataurl, filename) {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]

  const bstr = window.atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }

  return new File([u8arr], filename, { type: mime })
}

1.3 压缩图片

/**
 * @param {param.file} param.file 文件二进制流
 * @param {param.width}  输出图片宽度
 * @param {param.height}  输出图片高度
 * @param {param?.name} param.name 输出图片名称, 不传使用原图片名称
 * @param {param?.quality} 压缩图片程度，不传初始赋值0.92。值范围0~1
 * @param {param.success}  成功回调函数
 */
function pressImg(param) {
  param.fileName = param.name || param.file.name
  param.quality = param.quality ? param.quality : 0.92;
  // 得到文件类型
  let fileType = param.file.type;

  // 读取file文件,得到的结果为base64位
  changeFileToBaseURL(param.file, base64 => {
    if (base64) {
      var image = new Image()
      image.src = base64

      image.onload = function() {
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')

        canvas.width = param.width
        canvas.height = param.height
        // 把图片绘制到canvas上面
        context.drawImage(image, 0, 0, canvas.width, canvas.height)
        // 压缩图片，获取到新的base64Url
        var newImageData = canvas.toDataURL(fileType, param.quality)
        // 将base64转化成文件流
        var resultFile = dataURLtoFile(newImageData, param.fileName)

        param.success(resultFile)
      }
    }
  })
}

export {
  pressImg
}

2. 使用，以Element-UI上传为例

<template>
  <el-upload
    action="https://www.baidu.com"
    accept=".png,.jpg,.jpeg" 
    list-type="picture-card"
    :before-upload="beforeUpload"
  >
    <i slot="default" class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  methods: {
   // 文件上传前做相关压缩处理
    beforeUpload(file) {
      if (!file.type.includes('image')) {
        this.$message.error('请上传图片！')
        throw new Error('请上传图片')
      }

      return new Promise((resolve, reject) => {
        pressImg({
          file,
          width: 600,
          height: 600,
          success(resultFile) {
            resolve(resultFile)
          }
        })
      }).catch(() => {
        return false
      })
    }
  }
}
</script>

3. 参考文章

使用canvas压缩图片大小