element前端如何实现压缩图片功能

实现效果

如下图所示，从 580kb ->  压缩后  150kb

实现步骤

1、父级引入封装文件

//页面上

      
    
 
//js中
data() {
    return {
      compressImgVisible: false,
    }

2、首先实现上传功能，使用el-upload,

封装uploadImg.vue

 

 

.uploadImgBody{
  height: auto;
  .upload-image{
    width:200px;
    height: 200px;
    .fileImg{
      width:100%;
      height: 100%;
    }
  }
  .showImg{
    width:100px;
    height: 100px;
  }
 
}
 

3、加入压缩功能

逻辑：

首先，把file文件转成  canvas图片，然后canvas压缩图片利用canvas.toDataURL()将canvas绘制的图像转成图片从而达到压缩图片尺寸的效果

HTMLCanvasElement.toDataURL()

 具体方法：其中 dataUrl 就是拿到的canvas图片的base64地址

 /**
     * @压缩公共方法
     * @params file
     * @return 压缩后的文件，支持两种，file和 blob
     */
    compressImg(file) {
      const reader = new FileReader();
      // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，
      // 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
      reader.readAsDataURL(file);
      reader.onload = () => {
        const img = new Image();
        img.src = reader.result;
        img.onload = () => {
          // 图片的宽高
          const w = img.width;
          const h = img.height;
          const canvas = document.createElement("canvas");
          // canvas对图片进行裁剪，这里设置为图片的原始尺寸
          canvas.width = w;
          canvas.height = h;
          const ctx = canvas.getContext("2d");
          // canvas中，png转jpg会变黑底，所以先给canvas铺一张白底
          ctx.fillStyle = "#fff";
          // fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在
          // (x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          // 绘制图像
          ctx.drawImage(img, 0, 0, w, h);
 
          // canvas转图片达到图片压缩效果
          // 返回一个包含图片展示的 data URI base64 在指定图片格式为 image/jpeg 或 image/webp的情况下，
          // 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
          const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
          this.dialogImageUrl = dataUrl
 
        };
      };
    },

4、拿到的base64地址，不能直接给后端，要转格式，这里提供两种，一是file文件，跟压缩前的格式一样，还有一种是blob方法

// canvas生成的格式为base64，需要进行转化, base64->file
    dataURLtoFile(dataurl,fileName) {
      let arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
 
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], fileName, {type:mime})
    },
    // canvas生成的格式为base64，需要进行转化, base64->blob
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

实现源码（上传+压缩）：

uploadImg.vue

 

 

.uploadImgBody{
  height: auto;
  .upload-image{
    width:200px;
    height: 200px;
    .fileImg{
      width:100%;
      height: 100%;
    }
  }
  .showImg{
    width:100px;
    height: 100px;
  }
 
}