@fatesigner/img-compressor

img-compressor

Web img compressor.

说明

• 该插件基于 localResizeIMG ，添加了类型注释，增强了 API 的易用性。
• 由 typescript 编写，并编译为 ESM 和 CommonJs 、 UMD 的代码。 所以如果引入到您的项目中使用，需搭建好 typescript 或 babel 编译环境。
• 借助于 Webpack 的 dynamic import 可以有效减少首屏加载时间。

安装

npm i -S @fatesigner/img-compressor

使用

import { compressImg } from '@fatesigner/img-compressor';

let $input = document.getElementById('input');

// use async
let newFile: ICompressImgResponse = await compressImg($input.files[0]);

// use promise
compressImg($input.files[0]).then((newFile) => {
  console.log(newFile);
});

UMD

// 在 html 中依次导入
<script type="text/javascript" src="../dist/img-compressor.umd.js"></script>
<script type="text/javascript" src="../dist/img-compressor.chunk.umd.js"></script>

<input type="file" id="input" />

<script>
  let $input = document.getElementById('input');
  $input.onchange = function () {
    window.ImgCompressor.compressImg($input.files[0]).then((newFile) => {
      console.log(newFile);
    });
  };
</script>

API

compressImg(file, options) => ICompressImgResponse

压缩指定图片.

Param	Description
file	图片, File 对象
options	ICompressImgOptions

ICompressImgOptions

Param	default	Description
quality	0.7	图片压缩质量，取值 0 - 1
width	null	图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度
height	null	图片最大不超过的高度，默认为原图高度，宽度不设时会适应高度

ICompressImgResponse

Param	type	Description
formData	any	后端可处理的数据
file	File	压缩后的 file对象（默认已经丢在 rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的 file对象
fileLen	number	生成后的图片的大小，后端可以通过此值来校验是否传输完整
base64	string	生成后的图片 base64，后端可以处理此字符串为图片，也直接用于 img.src = base64
base64Len	number	生成后的 base64 的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
origin	File	原始的 file 对象，里面存了一些原始文件的信息，例如大小，日期等