vue2 + file-saver + JSZip压缩图片 -岛岛还存活在代码的第80天-

🏜JSZip压缩图片（单张）

1、创建点击进行压缩的按钮

 <input type="file" @change="imgfn" />

input上绑定的事件（按执行顺序排列）：

• mousedown
• focus
• mouseup
• click
• blur
• change
  change事件是失去焦点后才考虑触发，用的时候要谨慎，它的缺点是不能及时响应

2、npm安装jszip、file-saver

npm install jszip
npm install file-saver

在package.json，生成的版本号

"file-saver": "^2.0.5",
"jszip": "^3.10.1",

引入jszip、file-saver

import JSZip from "jszip";
import FileSaver from "file-saver";

3、编写imgfn事件

这是总的，底下有详细步骤

imgfn(event) {
   
      const readObj = new FileReader();
      readObj.onload = () => {
   
        // 读取到图片【原始的】base64数据,传入到压缩函数中
        this.fn(readObj.result.replace(/^data:image\/(png|jpeg);base64,/, ""