一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 工具
  • 开发技术分享

    node压缩图片之 squoosh/lib

    技术 653 2022-08-28 18:55

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

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

    然后通过canvas 在toDataURL 来进行压缩

    但是 发现如果想把压缩图片这个事情 当成一个批量自动化服务的话 ,就没办法使用canvas了


    所以我找了一个node的处理图片的库:squoosh/lib

    npm地址:https://www.npmjs.com/package/@squoosh/lib


    第一步下载包(0.4.0版本)

    npm install @squoosh/lib
    

    然后就一些固定代码了 没啥好说的

    我封装了一层promise 用来进行批量处理的

    const squoosh = require("@squoosh/lib");
    const fs = require("fs");
    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);
      });
    }
    

    调用示例:

    libSquooshOptimize("./imgs/test.jpg","test","build/images")
    

    这里比较有意思的地方 我需要说明一下:

    正常来讲 不调整尺寸的情况下 设置quality就可以进行压缩

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

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

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

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

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

    可以实现我的需求

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