前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >node压缩图片之 squoosh/lib

node压缩图片之 squoosh/lib

作者头像
biaoblog.cn 个人博客
发布2022-09-26 15:08:11
1.1K0
发布2022-09-26 15:08:11
举报
文章被收录于专栏:web技术开发分享

需求:先放在最前面:图片的压缩处理

最早的时候 我想写一个前端页面

然后通过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就可以进行压缩

但是我发现这个参数不怎么生效,

所以只能强制的去调整尺寸 来控制图片的压缩效果

如果只设置了宽或高 任意一个 图片就可以自适应 且达到达到压缩效果

因为这个压缩图片在我的列表页面的尺寸也是固定的

所以在不改变原尺寸的情况下 进行图片压缩 对我来说不那么重要

可以实现我的需求

介意尺寸的 可以考虑其它的库

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档