imgzip
TypeScript icon, indicating that this package has built-in type declarations

2.0.10 • Public • Published

imgZip

图片压缩插件

Demo示例

图片压缩

安装

npm

 npm i imgzip

script

<script src="https://unpkg.com/imgzip@2.0.8/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

Readme

Keywords

Package Sidebar

Install

npm i imgzip

Weekly Downloads

6

Version

2.0.10

License

MIT

Unpacked Size

11.6 kB

Total Files

6

Last publish

Collaborators

  • mgso