关于前端:几百张图片快速批处理工具batsharpjs介绍

我的项目开发中的图片问题

某些前端我的项目里含有大量图片，对这些图片进行系列操作仿佛是必须的，
因为你不可能指望设计师给到你的图片就是能最终上到生产的。
你可能须要对图片进行一系列的解决，能力满足最终要求。

这外面最常见的图片解决可能就是图片压缩和图片格式转换。

图片压缩

因为 dpr 的关系，如果是做挪动端我的项目，切图往往都是依照设施物理像素给定的，
常常是 3 倍图，这些图片是很大的。所以进行图片压缩是必不可少的一环。

如果只是大量图片压缩，咱们能够应用诸如 https://tinypng.com/ 这样的
在线图片解决工具，然而他们都有一个问题，即能解决的图片量或免费问题。
如果有上百张图片要解决，应用他们是比拟麻烦的。

以 tinypng 这个网站为例，尽管他说在收费版本里，一次最多能够帮忙转换 20 张图片，
然而如果你压缩完 20 张，马上再去压缩另外 20 张，
有肯定的概率它不会帮你压缩完，会提醒你：too many files uploaded。
那么这个时候，如果你可能须要稍等几分钟，再次操作，
它才可能帮你多压缩几张。
如此下来，压缩上百张图片，可能须要你几分钟甚至十几分钟工夫。

并不是说十几分钟很长，只是说 你明晓得，本能够几秒实现的事件，
却要花这么久，长此以往，你会感觉尽管收费但很不划算。

图片格式转换

第二个问题，也是基于 3 倍图很大的问题。如果咱们应用惯例的 png 或 jpg 图片，
在保障图片品质的状况下，那么再怎么压缩，都是有个上限的。

此时换一个空间占用更小的图片格式就能够解决这个上限问题。
咱们能够将图片转换成 webp 和 avif 这两种格局，他们的大小十分小。

而后在须要引入图片的代码里，这样写：

    <picture>
        <source srcset="@/assets/a.avif" type="image/avif">
        <source srcset="@/assets/a.webp" type="image/webp">
        <img src="@/assets/a.jpg" @error="onErr">
    </picture>

那么，浏览器将基于从上到下的程序，顺次查找图片，如果第一种格局的图片
浏览器能够渲染，就进行向下加载图片。

于是当你我的项目有上百张图片的时候，你就须要对这上百张图片进行格局转换。

bat-sharp

正是因为我的项目开发中的这两个图片解决问题，我开发了一个工具 bat-sharp。
他能够几秒钟就解决几百张图片的压缩和格局转换。

集体感觉很好用，所以发了个 npm 包，举荐给大家。

对于 bat-sharp 你可能有一些问题。

为什么叫 bat-sharp?

为什么叫 bat-sharp 呢？因为它底层应用的是 sharp 这个图片解决包，
我这里次要是封装了一些批处理的能力，所以叫 bat-sharp。

为什么它这么快？

因为 sharp 包底层是 libvips，一个 c ++ 写的图片解决库。

应用 bat-sharp

install

npm i bat-sharp -D

usage

const {batSharp} = require('bat-sharp');

batSharp({inputArr: ['./images/*.png'],
  format: 'webp', // png jpeg webp avif 等
  outputPath: './images2/',
  outputConfig: { // 参考 https://sharp.pixelplumbing.com/api-output#png
    quality: 60,
  },
})

请留神 outputConfig, 依据你要输入的格局不同，外部字段不同。
不过也有一些雷同的字段，比方管制图片品质的 quality 字段。

最初

bat-sharp 的 GitHub 地址：https://github.com/cunzaizhuy…

对于 bat-sharp 的解说视频：https://www.bilibili.com/vide…
对于如果在援用图片的时候应用多种格局：https://www.bilibili.com/vide…

我是飞叶，欢送关注。