简介
node-resemble-js 是一个基于 node.js 的 npm 包，它提供了一种方便快捷的方法来比较两张图片的相似度。
在前端开发中，我们经常需要进行页面比对测试，而有了 node-resemble-js ，这个繁琐的工作就会变得简单易行。
安装
你可以在终端输入以下命令，来安装 node-resemble-js ：
npm install node-resemble-js
使用
生成图片的数据
在使用 node-resemble-js 进行比对前，我们需要先加载我们想要比较的两张图片。
const fs = require('fs').promises; const resemble = require('resemblejs'); async function getImagesData() { const image1 = await fs.readFile('./image1.png'); const image2 = await fs.readFile('./image2.png'); return [image1, image2]; }
进行比较
获得图片数据之后，我们就可以调用 node-resemble-js 中的 compare 函数来进行比较。
-- -------------------- ---- ------- ----- -------- --------------- - ----- -------- ------- - ----- ---------------- ----- ------- - - ------- - ----------- - ---- ---- ------ -- ----- ---- -- ---------- ----------- ------------- ---- -- -- ----- ---------- - ----- ---------------- ------------------ --------------------- --------------- ------------- ------------------ ------------------------ --------------- -- ----------------- -展开代码
上面的 compareImages 函数，我们调用了 node-resemble-js 中的 compare 函数，将比较操作封装在函数中，实现简化调用。
其中， options 对象中的属性用来设置比较结果输出的颜色和类型，以及不透明度等。
显示比较结果
比较完成后，我们可以利用比较结果，自行生成一张图片，以人性化的方式展示两张图片的差异。
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ----- - ------------- ----- ----- - ----------------------------------------- ----- ------ - ------------------------------------------ ----- ------ - --- ------------- -------- ----- --- - ------------------------ ----------------- ----------- - ------------------------------------------ -- -- ------ -------- -------------------------------- -------------------展开代码
示例代码中，我们借助了 Canvas 包，使用 Node.js 中的 Canvas API，自动生成一张长相与效果类似的对比图。
结语
通过本文的讲解，你可以通过 node-resemble-js 生成并比较两张图片，在求出它们的相似度之后，还可以通过 Node.js 中的 Canvas API，自动生成一张长相与效果类似的对比图，以人性化的方式展示两张图片的差异。
感谢你的阅读，希望本篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/node-resemble-js
