前言
随着 Web 应用越来越复杂，现代前端开发中对图片处理的需求也在不断增加，特别是对图片压缩的需求。
在这方面，npm 包 imagemin-mozjpeg 是一个十分优秀的解决方案。它基于 mozjpeg，一款优秀的 JPEG 图片压缩算法，可以让你轻松地在前端代码中使用它来压缩图片。
本篇文章将详细介绍 imagemin-mozjpeg 的使用教程，包括安装、基本使用方法以及一些高级应用。
安装
在使用 imagemin-mozjpeg 之前，你需要先在项目中安装它。可以通过 npm 包管理器来安装它，具体方法如下：
npm install imagemin-mozjpeg --save-dev
注意，imagemin-mozjpeg 并不是一个独立的 npm 包，它是 imagemin 下的一个插件。因此，在使用 imagemin-mozjpeg 之前，你需要先安装 imagemin。
npm install imagemin --save-dev
基本使用方法
想要使用 imagemin-mozjpeg 来压缩图片，有两种基本的方法。
1. 使用命令行
可以使用命令行来直接运行 imagemin-mozjpeg。在命令行中输入以下命令：
npx imagemin <input-dir> --out-dir=<output-dir> --plugin=<plugin-name> [--plugin=<plugin-name>] [--option=<key=value>] [--option=<key=value>]
其中，<input-dir> 表示需要压缩的图片所在的文件夹，<output-dir> 则表示压缩后的图片存放的位置。
<plugin-name> 是指需要使用的压缩算法。因为 imagemin 中可以使用多种压缩算法，每种算法都有一个单独的插件，因此需要在这里指定使用的算法。对于 imagemin-mozjpeg，<plugin-name> 应该填写 imagemin-mozjpeg。
--option=<key=value> 则代表需要传递给压缩算法的参数。具体的可用参数可以参考 imagemin-mozjpeg 的官方文档。
2. 使用 Node.js
一个更灵活、更高级的方法，则是通过 Node.js 自己来使用 imagemin-mozjpeg。
首先需要引入 imagemin 和 imagemin-mozjpeg：
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');然后，可以使用下面的代码来压缩一个单独的图片文件：
-- -------------------- ---- -------
------ -- -- -
----- ----- - ----- -------------------------- -
------------ ---------------
-------- -
-----------------
-------- --
--
-
---
-------------------
---- ------- ------- -- -- -- --- ---------------- ------------------------ --
-----在上面的代码中，我们使用了 async/await 来等待异步操作完成。imagemin() 接受一个数组作为第一个参数，用于指定需要压缩哪些文件；第二个参数则是一个配置对象，其中，destination 用于指定压缩后的文件存储位置，在这里我们是将它们放到了 build/images 文件夹下；plugins 则是指定压缩所使用的插件，这里我们使用了 imageminMozjpeg，并且将质量设置为了 50。
高级应用
除了基本的使用方法，imagemin-mozjpeg 还支持一些高级的应用场景。以下是两个例子：
1. 将图片转换为 Base64 编码
imagemin-mozjpeg 可以将图片压缩后转换为 Base64 编码，将其嵌入到 HTML 中，从而减少 HTTP 请求，提高性能。
以下是一个例子：
-- -------------------- ---- -------
------ -- -- -
----- ---- - ----- -------------------------- -
------------ ---------------
-------- -
-----------------
-------- --
--
-
---
----- ----- - --------
----- ------ - ------------------------------
----- ---- - ----- -------------------------------------- ----
------------------
-----在上面的代码中，通过 data.toString('base64') 将图片数据转换为 Base64 编码，然后将其嵌入到 <img> 标签中，即可在 HTML 中使用。
2. 使用 imagemin-mozjpeg 进行图像处理
除了简单的压缩，imagemin-mozjpeg 还支持一些高级的图像处理操作，比如，将图片转换为黑白图片、裁剪图片等等。
以下是一个例子：
-- -------------------- ---- -------
----- ----- - ----------------- -- ---- ----- -
----- -- - -----------------------
------ -- -- -
----- ---- - ----- -------------------------- -
------------ ---------------
-------- -
-----------------
-------- --
--
-
---
----- ----- - ----- -------------------
------------ ----
------------
------
-----------
------------ -- ------------------
----- ------------------------------------------ -------
-----在上面的代码中，我们使用了 sharp 包来对图片进行处理。具体的图像处理操作在这里不做详细解释，可以参考 sharp 包的官方文档。
值得注意的是，在使用 imagemin 和 sharp 进行图像处理时，需要先将图片数据转换为 Buffer 格式，然后才能使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57668