背景
用户在上传图片时，会因图片体积较大，导致上传较慢。前端需要将用户上传的照片压缩，用户无感知可以直接上传成功。
JS图片压缩插件
-
compressorjs: 一个轻量级的 JavaScript 图片压缩库，支持压缩 JPEG、PNG、GIF、SVG 等常见图片格式，可以在浏览器和 Node.js 中使用。 -
pica: 一个基于 Web worker 的 JavaScript 图片处理库，可以实现图片压缩、缩放、旋转等功能。该库支持多种压缩算法，并可以调整压缩质量和尺寸，以满足不同场景的需求。 -
image-compressor: 一个基于 HTML5 Canvas 和 File API 的 JavaScript 图片压缩库，可以压缩 JPEG、PNG 和 GIF 格式的图片，并支持调整压缩质量和尺寸。该库支持在浏览器和 Node.js 中使用。 -
jpeg-js: 一个基于 JavaScript 的 JPEG 图片编解码库，可以实现 JPEG 图片的压缩和解压缩功能。该库支持在浏览器和 Node.js 中使用，并提供了多种压缩算法和参数选项。 -
sharp: 一个基于 Node.js 的高性能图片处理库，可以实现图片压缩、缩放、裁剪等功能。该库支持多种图片格式和压缩算法，并可以调整压缩质量和尺寸，以满足不同场景的需求。
代码实例
本次开发采用js-image-compressor工具库
<input type="file" accept="image/jpeg, image/png" onChange={this._fn} />
_fn = (e) => {
const files = e.target.files;
if (files.length === 0) {
、、、
} else {
this._uploadFn(files[0]);
}
};
_uploadFn = async (file) => {
const formData = new FormData();
let newFile = file;
// 超过200k压缩
if (newFile?.type && newFile?.size > 200 * 1024) {
try {
newFile = await this.compressionImage(newFile);
} catch (error) {
console.log(error);
}
}
const { name } = newFile;
const names = name.split('.');
const suffix = names[names.length - 1];
const params = { suffix, ...};
formData.append('file', newFile);
const msg = 。。。;
const sign =。。。;
formData.append('msg', msg);
formData.append('sign', sign);
Fetch.post('url', formData)
.then((resdata) => {
// 图片解析成功
})
.catch((err) => {
});
};
// 图片压缩
compressionImage = (file) => new Promise((resolve, reject) => {
// eslint-disable-next-line no-new
new ImageCompressor({
file,
quality: 0.3,
maxWidth: 750,
maxHeight: 1334,
redressOrientation: false,
beforeCompress(result) {
console.log('压缩之前图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
},
success: (result) => {
console.log('压缩之后图片尺寸大小: ', result.size);
console.log('mime 类型: ', result.type);
// eslint-disable-next-line no-mixed-operators
console.log('压缩率： ', `${(result.size / file.size * 100).toFixed(2)}%`);
resolve(result);
},
error: (e) => {
reject(e);
},
});
});
