介绍
在前端开发过程中，我们经常需要对图像进行处理，比如调整尺寸，改变颜色，加水印等等。而 @jimp/png 就是一款非常方便的 npm 包，可以让我们在前端轻松地实现这些功能。
@jimp/png 是 jimp 库的一部分，它是一个纯 JavaScript 编写的图像处理库，提供了大量常用的图像处理函数，支持常用的图像格式（比如 PNG、JPEG、BMP 等等），而且还有完整的文档和示例代码。
安装
要使用 @jimp/png，我们需要先安装 jimp 和 @jimp/png 两个 npm 包：
npm install jimp @jimp/png --save
特性
@jimp/png 提供了以下功能：
- 缩放图像：可以缩小或放大图像。
- 调整尺寸：可以裁剪、旋转、翻转图像。
- 修改颜色：可以改变图像整体颜色，也可以对每个像素点的颜色进行修改。
- 图像滤镜：可以通过添加滤镜、高斯模糊等效果来改变图像外观。
- 图像合并：可以将多张图像合并成一张图像。
- 文字水印：可以给图像添加文字水印。
- 图像保存：可以将处理后的图像保存到服务器或本地磁盘中。
@jimp/png 还支持链式调用，让我们能够更简洁地写出代码。
示例
下面是一个简单的示例，演示了如何使用 @jimp/png 对图像进行缩放和滤镜处理：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - --------------------- -- ---- ----------------------------------- -- - -- ----- - - --------------- -- -------- ------------------ -- ------- -------------------------- -------------- -- - ------------------- ---
上述代码中，首先使用 Jimp.read() 方法加载名为 input.png 的图像，然后使用 image.scale(2) 方法将图像放大两倍，使用 image.gaussian(5) 方法添加一个高斯模糊滤镜。
最后，使用 image.write('output.png') 方法将处理后的图像保存到磁盘中。
总结
@jimp/png 是一款功能强大的 npm 包，可以帮助我们轻松地实现前端图像处理。通过学习这个包的使用方法，我们可以更加灵活地应对前端开发中的各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6a1d29a9b7065299ccb874