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