使用 Javascript 客户端压缩图片
请先下载JS压缩插件在下载后，在 dist 目录下找到 image-compress.min.js 文件在页面中通过 script 引入：
<script src="../dist/image-compressor.js"></script>简单使用
你可以只传入待压缩图片对象，其他参数都是非必须的，插件按照默认参数自动完成图片压缩处理。不过这样输出的压缩图片符合以下特征：
- 默认按照
0.8压缩率配置； - 输出图片宽/高维持源图片宽/高；
- 一般的，输出图片格式保持源图片格式；
- 当
png图片的size大于2m时，默认转化成jpeg格式图片； - 给
png图片填充透明色； - 当输出图片
size大于源图片时，将源图片当作输出图片返回； jpeg格式图片，矫正翻转/旋转方向；
如果这些默认配置不能满足你的需求，可能需要其他参数配置。以下是一个简单使用配置：
var options = {
file: file,
// 压缩前回调
beforeCompress: function (result) {
console.log('压缩之前图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
},
// 压缩成功回调
success: function (result) {
console.log('result: ', result)
console.log('压缩之后图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
}
};
new ImageCompressor(options);其中，钩子函数 beforeCompress 发生在读取图片之后，创建画布之前；钩子函数 success 函数发生在压缩完成生成图片之后。它们回调参数 result 是整合来尺寸、图片类型和大小等相关信息的 blob 对象。
标准使用
在标准使用中，我们可以根据自身需求自定义配置压缩比（quality）、输出图片类型（mimeType）、宽（width）、高（height）、最大宽（maxWidth）、最大高（maxHeight）、最小宽（minWidth）、最大高（minHeight）、png转jpeg阈值（convertSize）、是否矫正jpeg方向（redressOrientation）和是否宽松模式（loose）。
- 是否矫正jpeg方向（
redressOrientation），jpeg格式图片在某些iOS浏览器会按其方向呈现图像，这个选项可以控制恢复初始方向，默认为true； - 是否宽松模式（
loose）、的意思是控制当压缩的图片size大于源图片，输出源图片，否则输出压缩后图片，默认是true。
以下是标准配置：
var options = {
file: file,
quality: 0.6,
mimeType: 'image/jpeg',
maxWidth: 2000,
maxHeight: 2000,
width: 1000,
height: 1000,
minWidth: 500,
minHeight: 500,
convertSize: Infinity,
loose: true,
redressOrientation: true,
// 压缩前回调
beforeCompress: function (result) {
console.log('压缩之前图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
},
// 压缩成功回调
success: function (result) {
console.log('压缩之后图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
},
// 发生错误
error: function (msg) {
console.error(msg);
}
};
new ImageCompressor(options);error 钩子函数是图片压缩过程中错误回调，没有这个回调错误则会在插件中 throw new Error(msg) 形式抛出。
其他钩子函数
在压缩输出图片之前，我们还可以对画布进行一些自定义处理，融入元素。
以下是对图片进行灰度和加水印处理：
本文系作者在时代Java发表，未经许可，不得转载。
如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java
关注时代Java