官方文档地址
https://fengyuanchen.github.io/compressorjs/
主要目录
dist/
├── compressor.js (UMD)
├── compressor.min.js (UMD, compressed)
├── compressor.common.js (CommonJS, default)
└── compressor.esm.js (ES Module)使用
查看下载和使用，简要代码如下
<input type="file" id="file" accept="image/*">new Compressor('这里传入文件对象fileObj', {
width: 1000,
quality: 0.8,
success: function (result) {
console.log('Output: ', result);
var sourceSize = toFixed2(fileObj.size / 1024),
resultSize = toFixed2(result.size / 1024),
scale = parseInt(100 - (resultSize / sourceSize * 100));
console.log('源文件：' + sourceSize + 'KB' + '压缩后传输大小：' + resultSize + 'KB (省' + scale + '%)');
},
error: function (err) {
// 提示错误
console.log(err.message);
}
})官方参数
选项
您可以使用“new Compressor(file, options)”设置压缩器选项。
如果你想改变全局默认选项，你可以使用 Compressor.setDefaults(options)。
严格的
- 类型：
布尔 - 默认值：
true
指示当压缩图像的大小大于原始图像时，是否输出原始图像而不是压缩图像，但以下情况除外：
- 设置了
mimeType选项，其值与图像的 mime 类型不同。 - 设置了
width选项，其值大于图像的自然宽度。 - 设置了
height选项，其值大于图像的自然高度。 - 设置了
minWidth选项，其值大于图像的自然宽度。 - 设置了
minHeight选项，其值大于图像的自然高度。 - 设置了
maxWidth选项，其值小于图像的自然宽度。 - 设置了
maxHeight选项，其值小于图像的自然高度。
检查方向
- 类型：
布尔 - 默认值：
true
指示是否读取图像的 Exif Orientation 值（仅限 JPEG 图像），然后使用该值自动旋转或翻转图像。
笔记：
- 不要一直相信这一点，因为某些 JPEG 图像具有不正确（非标准）的方向值。
- 如果目标图像的大小太大（例如，大于 10 MB），您应该禁用此选项以避免内存不足崩溃。
- 压缩后图片的Exif信息将被删除，因此如果您需要Exif信息，您可能还需要上传原始图片。
最大宽度
- 类型：
数字 - 默认值：
Infinity
输出图像的最大宽度。该值应大于“0”。
避免获得空白输出图像，您可能需要将maxWidth和maxHeight选项设置为有限的数字，因为 [画布元素的大小限制](https://stackoverflow.com/questions/6081483/画布元素的最大尺寸），建议使用4096或更少。
最大高度
- 类型：
数字 - 默认值：
Infinity
输出图像的最大高度。该值应大于“0”。
最小宽度
- 类型：
数字 - 默认值：
0
输出图像的最小宽度。该值应大于“0”且不应大于“maxWidth”。
最小高度
- 类型：
数字 - 默认值：
0
输出图像的最小高度。该值应大于“0”且不应大于“maxHeight”。
宽度
- 类型：
数字 - 默认值：
未定义
输出图像的宽度。如果未指定，将使用原始图像的自然宽度，或者如果设置了 height 选项，则宽度将根据自然纵横比自动计算。
高度
- 类型：
数字 - 默认值：
未定义
输出图像的高度。如果未指定，将使用原始图像的自然高度，或者如果设置了 width 选项，则高度将根据自然纵横比自动计算。
调整大小
- 类型：
字符串 - 默认值：
"none" - 选项：
"none"、"contain"和"cover"。
设置图像的大小应如何调整为由 width 和 height 选项指定的容器。
注意： 此选项仅在同时指定了 width 和 height 选项时可用。
质量
- 类型：
数字 - 默认值：
0.8
输出图像的质量。它必须是介于“0”和“1”之间的数字。如果此参数是其他任何参数，则默认值 0.92 和 0.80 分别用于 image/jpeg 和 image/webp。其他参数被忽略。小心使用“1”，因为它可能会使输出图像的尺寸变大。
注意： 此选项仅适用于image/jpeg 和image/webp 图像。
查看 canvas.toBlob 了解更多详情。
例子：
| 质量 | 输入尺寸 | 输出尺寸 | 压缩比 | 说明 |
|---|---|---|---|---|
| 0 | 2.12 MB | 114.61 KB | 94.72% | - |
| 0.2 | 2.12 MB | 349.57 KB | 83.90% | - |
| 0.4 | 2.12 MB | 517.10 KB | 76.18% | - |
| 0.6 | 2.12 MB | 694.99 KB | 67.99% | 推荐 |
| 0.8 | 2.12 MB | 1.14 MB | 46.41% | 推荐 |
| 1 | 2.12 MB | 2.12 MB | 0% | 不推荐 |
| 南 | 2.12 MB | 2.01 MB | 5.02% | - |
mimeType
- 类型：
字符串 - 默认值：
'auto'
输出图像的 MIME 类型。默认情况下，将使用源图像文件的原始 mime 类型。
转换类型
- 类型：
Array或string（多个类型应以逗号分隔） - 默认值：
['image/png'] 例子：
['图像/png'，'图像/webp']'图像/png，图像/webp'
文件类型包含在此列表中且文件大小超过 convertSize 值的文件将被转换为 JPEG。
转换大小
- 类型：
数字 - 默认值：
5000000(5 MB)
文件类型包含在 convertTypes 列表中且文件大小超过此的文件值将被转换为 JPEG。要禁用此功能，只需将值设置为“Infinity”。
例子：
| 转换大小 | 输入尺寸（类型） | 输出尺寸（类型） | 压缩比 |
|---|---|---|---|
| 5 MB | 1.87 MB (PNG) | 1.87 MB (PNG) | 0% |
| 5 MB | 5.66 MB (PNG) | 450.24 KB (JPEG) | 92.23% |
| 5 MB | 9.74 MB (PNG) | 883.89 KB (JPEG) | 91.14% |
beforeDraw（上下文，画布）
- 类型：
函数 - 默认值：
null 参数：
context：画布的 2d 渲染上下文。canvas：用于压缩的画布。
在将图像绘制到画布进行压缩之前要执行的钩子函数。
new Compressor(file, {
beforeDraw(context, canvas) {
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
context.filter = 'grayscale(100%)';
},
});绘制（上下文，画布）
- 类型：
函数 - 默认值：
null 参数：
context：画布的 2d 渲染上下文。canvas：用于压缩的画布。
将图像绘制到画布中进行压缩后要执行的钩子函数。
new Compressor(file, {
drew(context, canvas) {
context.fillStyle = '#fff';
context.font = '2rem serif';
context.fillText('watermark', 20, canvas.height - 20);
},
});成功（结果）
- 类型：
函数 - 默认值：
null 参数：
result：压缩图像（File（只读）或Blob对象）。
成功压缩图像时执行的钩子函数。
错误（错误）
- 类型：
函数 - 默认值：
null 参数：
err：压缩错误（一个Error对象）。
当无法压缩图像时执行钩子函数。