简介
lcs-image-diff 是一款能够比对两张图片差异并生成 diff 图的 npm 包。用户可以将其用于前端自动化测试、监测页面 UI 变化等场景。本文将详细介绍这个 npm 包的使用方法及相关注意事项，并提供示例代码供读者参考。
安装
安装 lcs-image-diff 的命令为：
npm install lcs-image-diff
使用
- 引入
在需要使用该 npm 包的项目中，先将其引入：
const lcsImageDiff = require('lcs-image-diff');
- 使用方法
在具体使用时，需传入两个参数：
- oldImage：之前的图片。
- newImage：新的图片。
const result = lcsImageDiff.diff(oldImage, newImage);
其中，result 表示返回的结果对象。
对象中有两个属性：
- isSameDimensions：图片尺寸是否一致。
- dimensionDifference：两张图片的尺寸差异值。
- 生成 diff 图
若需要将两张图片的差异展现出来，则需调用 generate-diff 函数。该函数需要传入四个参数：
- oldImage：之前的图片。
- newImage：新的图片。
- diffImage：最终生成差异图的路径。
- tolerance：差异容忍度。默认值为 0。该参数设置的越大，则判断为差异的像素点越少。
lcsImageDiff.generateDiffImage(oldImage, newImage, diffImage, tolerance);
示例
下面提供一个示例代码供读者参考：
-- -------------------- ---- ------- ----- ------------ - -------------------------- ----- -------- - -------------------------- ----- -------- - -------------------------- ----- --------- - --------------------------- ----- --------- - -- ----- ------ - --------------------------- ---------- -- -------------------------- - -------------------------- - ---- - --------------------- --------------------------------- ---------------------------------------- --------- ---------- ----------- ----------------------- ---------------- -展开代码
注意事项
- 被比对的两张图片应当是同一尺寸的，否则比对结果将有误。
- 生成的差异图中，相同部分被标记为灰色，不同部分被标记为红色。
- 注意差异容忍度的设置。设置过小则漏报差异，设置过大则将不同的像素点误报为相同。建议在 0~10 的区间设置容忍度。
结语
以上就是 lcs-image-diff 的使用教程。希望对读者在前端自动化测试等场景下能够提供帮助。更多细节及用法可以查看该包的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f76aa797116197505561a88
