前端使用canvas图片压缩

前端使用canvas图片压缩

       在上传图片时，可能会由于图片过大导致上传速度变慢或者占用服务器内存，此时需要在上传之前将图片进行压缩，此处我是在前端进行处理的，使用的是canvas将图片进行重构，之后把base64格式的图片再转为一个file文件，最后在上传的时候转为formdata格式。
       下面主要是图片由base64格式转为一个file文件，以及使用canvas压缩的方法，仅供参考。
将base64转换为文件

  dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },

图片经过canvas压缩

let fileCon = null
// 大于300K图片都缩小像素上传
if (file.file.size > 300 * 1024) {
  // 创建Canvas对象(画布)
  let canvas = document.createElement('canvas')
  // 获取对应的CanvasRenderingContext2D对象(画笔)
  let context = canvas.getContext('2d')
  // 创建新的图片对象
  let img = new Image()
  // 指定图片的DataURL(图片的base64编码数据)
  img.src = file.content
  // 监听浏览器加载图片完成，然后进行进行绘制
  img.onload = () => {
    setTimeout(() => {

    }, 100)
    // 指定canvas画布大小，该大小为最后生成图片的大小
    canvas.width = img.width
    canvas.height = img.height
    /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。 */
    context.drawImage(img, 0, 0, img.width, img.height)
    /* 添加水印 */
    if (canvas.width < 2000) {
      context.font = 80 + 'px Arial'
    } else {
      context.font = 250 + 'px Arial'
    }

    context.fillStyle = 'rgba(252,255,255,0.8)'
    /* 文字靠右显示 */
    context.textAlign = 'right'
    context.fillText(
      moment().format('YYYY-MM-DD HH:mm:ss'),
      canvas.width - 50,
      canvas.height - 100
    )
    // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
    // file.content = canvas.toDataURL(file.file.type, 0.2)
    fileCon = canvas.toDataURL(file.file.type, 0.2)
    let files = this.dataURLtoFile(fileCon, file.file.name)
    // 最后将base64编码的图片保存到数组中，留待上传。
    this.beforeFile.push(files)
  }
}