在前端开发中，对于图片的处理是不可避免的。而图片体积过大会直接影响页面的加载速度，因此需要对图片进行压缩以提高页面性能。本文将向大家介绍如何使用 npm 包 image-compress 来进行图片压缩。
1. 什么是 image-compress
image-compress 是一款可以在浏览器中进行图片压缩的 npm 包。它可以将图片压缩到指定大小或者指定质量，支持多种图片格式，例如 JPEG、PNG、SVG 等。
2. 如何使用 image-compress
首先，我们需要将 image-compress 安装到我们的项目中，可以通过以下命令进行安装：
npm install image-compress
安装完成后，我们可以在代码中引入 image-compress：
import { Compress } from 'image-compress';然后，我们就可以使用 Compress 类对图片进行压缩了。下面我们介绍两种常见的压缩方式。
2.1 将图片压缩到指定大小
可以使用 compressBySize 方法，将图片压缩到指定的大小：
-- -------------------- ---- ------- ----- -------- - --- ----------- ----------------------------- - ---------- -- ----------------- ----- ----------------- -- - ----- --- - ----------- -- --- --- ------- ---- -- ---
其中，file 是需要压缩的图片文件，maxSizeMB 表示压缩后的图片大小限制，单位是 MB；maxWidthOrHeight 表示压缩后图片的最大宽度或最大高度，如果图片宽度或高度超过这个值会被等比缩小。
2.2 将图片按照质量压缩
可以使用 compressByQuality 方法，将图片按照质量压缩：
const compress = new Compress();
compress.compressByQuality(file, {
quality: 0.8,
}).then((results) => {
const img = results[0];
// 此时的 img 是压缩后的图片 Blob 对象
});其中，file 是需要压缩的图片文件，quality 表示压缩后的图片质量，值的范围为 0 到 1（0 表示最差质量，1 表示最佳质量）。
3. image-compress 的进阶用法
除了上述介绍的压缩方式之外，还可以通过 Compress 类提供的其他方法对图片进行更多的操作，比如对图片进行旋转、裁剪等。感兴趣的读者可以自行查阅 image-compress 的文档。
结语
本文介绍了如何使用 npm 包 image-compress 对图片进行压缩，为前端开发人员减轻了处理图片的负担。希望本文可以对读者带来一些启示和帮助。完整示例代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- ----- -------- - --- ----------- -- --------- ----------------------------- - ---------- -- ----------------- ----- ----------------- -- - ----- --- - ----------- -- --- --- ------- ---- -- --- -- -------- -------------------------------- - -------- ---- ----------------- -- - ----- --- - ----------- -- --- --- ------- ---- -- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56688