使用FileReader + canvas.toDataURL() 实现图片压缩

主要借助FileReader读取文件、canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩。

<template>
  <div>
    <input type="file" @change="fun" />
    <div style="display: flex">
      <div>
        <h4>原始图片</h4>
        <img
          :src="origin"
          style="width: 300px; height: 300px; margin-right: 10px"
        />
      </div>
      <div>
        <h4>压缩图片</h4>
        <img :src="compress" style="width: 300px; height: 300px" />
      </div>
    </div>
  </div>
</template>

data(){
    return {
        origin:"",
        compress:""
    }
},
methods: {

    // 图片压缩
    compress_img(imgBase64, quality, mimeType) {
      let [canvas, img] = [
        document.createElement("canvas"),
        document.createElement("img"),
      ];

      img.src = imgBase64;
      img.onload = () => {
        // canvas 宽高
        canvas.width = 300;
        canvas.height = 300;

        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, 300, 300); // 从左上角开始绘制，宽高均为400，可自行修改

        // 将canvas对象转换为base64位编码
        const newImgBase64 = canvas.toDataURL(mimeType, quality / 100); // 参数：type，文件类型 encoderOptions，取值0~1，可用表示图片的质量
        // console.log('压缩后的图片:',newImgBase64) // 压缩后的图片base64
        this.compress = newImgBase64;
      };
    },

    fun (e) {
      // console.log(e.target.files[0]);
      const read = new FileReader();
      read.onload = () => {
        // read.result 读取原始图片base64
        this.origin = read.result;
        // console.log('原始图片: ',read.result)
        this.compress_img(read.result, 20, "image/jpeg");
      };
      read.readAsDataURL(e.target.files[0]);
    },
}

从上图，可以看出图片质量被压缩之后，变得非常模糊，文件的大小也会变小。

【FileReader、Canvas.toDataURL，实现前端图片压缩】 https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2