前端使用canvas图片压缩

约定不等于承诺〃 2023-01-18 13:25 92阅读 0赞

### 前端使用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)
      }
    }