imgZip

图片压缩插件

Demo示例

图片压缩

安装

npm

 npm i imgzip

script

<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>

@2.0.8为固定版本,可自行调整

使用方法

2.x版本（支持ts）

import imgzip from "imgzip";

export default {
  name: "App",
  mounted() {
    // 监听选择文件
    document.getElementById("file").onchange = function () {
      // @2.x版本后采用 class Api。所以需要 new 一个 imgZip 对象
      let compress = new imgzip({ quality: 0.5 });
      // 调用图片压缩
      compress.photoCompress(this.files[0], function (base64) {
        // document.getElementById('img').src = base64  //预览图片
        // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
        let blob = imgzip.convertBase64UrlToBlob(base64);
        let formData = new FormData();
        formData.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
        // 上传操作....
      });
    };
  },
};

函数说明

@2.x版本后改用class api, 原photoCompress函数中传入的options参数改为实例化imgzip时传入。

• new imgZip(options)

参数	说明	是否必须	默认值
options.width	图片宽度	否	图片原始宽度
options.height	图片高度	否	图片原始高度
options.quality	图片质量	否	0.7

• photoCompress(图片压缩函数) 无返回值

参数	说明	是否必须	默认值
file	文件对象(Blod)	是	-
callback	压缩后回调函数,回调参数返回压缩后的base64编码	是	-

1.x版本(不支持ts)

import imgzip from "imgzip";

export default {
  name: "App",
  mounted() {
    // 监听选择文件
    document.getElementById("file").onchange = function () {
      // 调用图片压缩
      imgzip.photoCompress(this.files[0], {}, function (base64) {
        // document.getElementById('img').src = base64  //预览图片
        // 转 blob 流上传
        let blob = imgzip.convertBase64UrlToBlob(base64);
        let formData = new FormData();
        formData.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
        // 上传操作....
      });
    };
  },
};

函数说明

• photoCompress(图片压缩函数)

参数	说明	是否必须	默认值
file	文件对象(Blod)	是	-
options	压缩参数(宽/高/质量)	否	{width:图片高度,height:图片宽高比,quality:0.7}
callback	压缩后回调函数,回调参数返回压缩后的base64编码	是	-

• convertBase64UrlToBlob(base64编码转blod流) 1.x版本和2.x版本均为imgzip的静态函数

参数	说明	是否必须	默认值	返回值
base64	图片base64编码	是	-	Blod

致谢

感谢JetBrains提供的开源License

https://jb.gg/OpenSourceSupport