需求:先放在最前面：图片的压缩处理
最早的时候 我想写一个前端页面
然后通过canvas 在toDataURL 来进行压缩
但是 发现如果想把压缩图片这个事情 当成一个批量自动化服务的话 ，就没办法使用canvas了
所以我找了一个node的处理图片的库：squoosh/lib
npm地址：https://www.npmjs.com/package/@squoosh/lib
第一步下载包(0.4.0版本)
代码语言：javascript复制npm install @squoosh/lib然后就一些固定代码了 没啥好说的
我封装了一层promise 用来进行批量处理的
代码语言：javascript复制const squoosh = require("@squoosh/lib");
const { ImagePool } = squoosh;
async function libSquooshOptimize(imagePath, filename, outputFolderPath) {
return new Promise(async (resolve) => {
const imagePool = new ImagePool();
const image = await imagePool.ingestImage(imagePath);
const preprocessOptions = {
resize: {
width: 330,
},
};
await image.preprocess(preprocessOptions);
const encodeOptions = {
mozjpeg: "auto", // an empty object means 'use default settings'
jxl: {
quality: 100,
},
jpg: {
quality: 100,
},
};
await image.encode(encodeOptions);
const { extension, binary } = await image.encodedWith.mozjpeg;
fs.writeFileSync(`${outputFolderPath}/${filename}.${extension}`, binary);
imagePool.close();
resolve(true);
});
}调用示例：
代码语言：javascript复制libSquooshOptimize("./imgs/test.jpg","test","build/images")这里比较有意思的地方 我需要说明一下：
正常来讲 不调整尺寸的情况下 设置quality就可以进行压缩
但是我发现这个参数不怎么生效，
所以只能强制的去调整尺寸 来控制图片的压缩效果
如果只设置了宽或高 任意一个 图片就可以自适应 且达到达到压缩效果
因为这个压缩图片在我的列表页面的尺寸也是固定的
所以在不改变原尺寸的情况下 进行图片压缩 对我来说不那么重要
可以实现我的需求
介意尺寸的 可以考虑其它的库
