在前端开发中，图片处理是一个不可避免的问题，而在测试中，对比不同版本之间的图片差异也非常重要。npm 包 node-resemble-ng 是一个可用于比较两张图片差异的工具，本文将为大家介绍如何使用这个包。
安装 node-resemble-ng
我们可以通过 npm 来安装它：
npm install node-resemble-ng
使用 node-resemble-ng
在代码中引入 node-resemble-ng：
var fs = require('fs');
var resemble = require('node-resemble-ng');接下来，我们将要对比的两张图片路径及结果保存路径定义：
var img1Path = 'img1.jpg'; var img2Path = 'img2.jpg'; var diffImagePath = 'diff.png';
最后，在调用 resemble 函数时，传入两张图片的路径即可：
resemble(fs.readFileSync(img1Path), fs.readFileSync(img2Path), function(err, data) {
fs.writeFileSync(diffImagePath, data.getBuffer());
});上述代码会把 img1.jpg 和 img2.jpg 进行比较，比较结果则会保存到 diff.png 中。
node-resemble-ng 应用示例
下面我们将用一个小例子来演示如何使用 node-resemble-ng 应用，首先，我们需要多张图片：
以下是完整代码示例：
-- -------------------- ---- -------
--- -- - --------------
--- -------- - ----------------------------
--- -------- - -----------
--- -------- - -----------
--- --------- - ------------
--- --------- - -----------
--- -------- - -----------
--- --------- - ------------
----------------------------------- -------------------------- ------------- ----- -
--------------------------- ------------------
----------------- - ---- ---------- - -----------
---
------------------------------------ -------------------------- ------------- ----- -
--------------------------- ------------------
----------------- - ---- ---------- - -----------
---控制台输出：
img1 和 img2 比较结果保存位置：diff1.png img1 和 img3 比较结果保存位置：diff2.png
比较结果效果预览：
结论
node-resemble-ng 是一个实用的 npm 包，它可以用于比较两张图片的差异，并可保存比较结果。我们可以在代码中轻松引入它，并传递需要比较的图片路径即可。在前端开发中，它可以用于测试图片是否正确生成；在对比两个版本之间的图片变化时，它也是一个非常有用的工具，希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590f81e8991b448d67ef