imgtotiny

一个通用前端图片压缩插件，用于 web 端，可以针对 png 图片进行有损压缩

安装

使用 npm 安装

npm install imgtotiny

使用

import imgToTiny from 'imgtotiny'

const changeFile = async e => {
  const file = e.target.files[0]
  const newFile = await imgToTiny(file)
  // 或者传入参控制
  const newFile2 = await imgToTiny(file, {
    quality: 0.5
  })
}

Options

options 非必填，支持以下 4 个配置项：

名称	类型	是否必填	默认值	说明
quality	number	否	0.6	压缩质量，范围 0-1 之间，值越小压缩率更高
minSize	number	否	-	最小尺寸，单位字节（b），当传入图片尺寸小于这个值时不压缩
width	number	否	-	输出图片的宽度，此时高度等比例计算，minSize 无效
height	number	否	-	输出图片的高度，此时宽度等比例计算，minSize 无效
returnBase64	boolean	否	false	设置为 true 时，直接返回 base64 字符串
allKeepType	boolean	否	false	当设置为 true 时，所有图片保持原类型输出，详见说明

说明

本插件压缩图片时，默认支持原图片类型输出的有 image/jpeg，image/webp 和 image/png。而 svg 图片会转成 png 格式再压缩输出，剩下其他类型的图片会转换成 jpg 格式再压缩输出。

这是因为除了 png 图片之外，别的图片压缩都是利用到 canvas 的 toBlob 方法，它的 quality 参数主要支持 image/jpeg 和 image/webp，当传入其他格式的图片时，是可以压缩的，但是这个 quality 参数就失去了控制，变成默认的压缩。

如果你仍然想保持原类型输出，可以设置 allKeepType: true，但不能保证结果，例如 svg 图片原类型压缩后就无法显示。

而对于 png 图片，是利用 UPNG.js 进行有损压缩的，可以保持原类型输出。

svg 是无损压缩的矢量图，插件不能直接压缩，需要转换成 png 格式再压缩，之所以不是转换成 jpg 是因为转成 jpg 后，图片底色会变黑。

注意

如果不是特殊场景，建议设置 allKeepType:false，这样可以保证大部分图片正常显示。

当设置 width 或者 height 时，minSize 失效，因为裁切本身就会降低图片质量，此时可以适当提高 quality 的值，如 0.9。

更新

• 0.1.0：添加等比例缩放裁切功能