什么是x-img-diff-js
x-img-diff-js是一款用于比较两张图片差异的npm包。它基于canvas实现了图片差异计算，支持不同格式图片的比较，并且可以设置阈值和像素精度等参数以达到更精细的比较结果。 使用x-img-diff-js可以在前端测试中方便的进行DOM截图比较、图片替换等操作。
如何安装x-img-diff-js
在你的项目目录下，使用npm安装x-img-diff-js:
npm install x-img-diff-js --save-dev
如何使用x-img-diff-js
简单示例
以下是一个简单的使用示例:
-- -------------------- ---- ------- ----- -------- - ------------------------- ----- ---- - --------------------- ----- ---- - --------------------- ----- ------- - --- ----- ------ - ------------------- ----- --------- -------------------- -- -- -- - -- ----------------- ----- -- -------------------- - ------ -- ------- - -- -- ---------------------- -- -- ------------------- ------- -- ----------- - ---- -- ----- -- ------- -- ------ - -- -- ------------- ----- -- ---- -- ----------- - ------ ------- - -- -
diff方法接受三个参数，分别是图片1路径、图片2路径和比较选项。比较选项是一个对象，目前支持以下参数:
threshold: 比较阈值，0~1之间的小数，默认为0.1includeAA: 是否包括平滑处理的像素，默认为falsealpha: 比较是否包含alpha通道，默认为trueaaColor: 平滑处理的像素的颜色值，默认为[255, 255, 255]diffColor: 不同像素的颜色值，默认为[255, 0, 0]diffBounds: 是否返回不同像素区域的坐标，默认为falseignoreAntialiasing: 是否忽略平滑处理的像素，默认为falseignoreColors: 是否忽略颜色，即对图像进行灰度处理进行比较，默认为falseignoreRect: 忽略及跳过区域，默认为nulltolerance: 容差值，如值为1，则被比较像素的RGB值为（200,160,100），容差值为1时，差异像素位（199,159,99）至（201，161，101）全视为相同。antialiasingTolerance: 平滑处理像素容差值，默认为0.01
输出结果中包含了比较结果的各种信息，可以根据需要提取对应信息。其中的getBuffer()方法可以获取比较后的图片buffer。
DOM截图比较
在进行DOM截图比较时，需要将DOM元素截图后再进行比较。以下是一个截图并比较的示例：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
------
---- -------------------------
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
--------
-------------------------------------------------------- -- -
----- ---- - ------------------------------
----- ---- - ---------------------
----- ------- - ---
----- ------ - ------------------- ----- ---------
--------------------
---
---------
-------
-------首先引入html2canvas和x-img-diff-js，然后使用html2canvas将DOM元素截图后转换成base64格式的图片（canvas.toDataURL()），再将其与另外一张图片进行比较即可。
图片替换
图片替换时，使用x-img-diff-js可以实现对替换后的图片与原图进行对比，验证替换是否成功。以下是一个图片替换的示例：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
---- ------------------------ ---------
------- ------------------------------------
------- -------------------------------------------------------------------
--------
-------- ------------ -
----- --- - -------------------------------
------- - ---------------------
---------- - -- -- -
----- ------- - ---
----- ------ - ------------------ --------------------- ---------
--------------------
--
-
---------
-------
-------首先引入x-img-diff-js，然后将第一个图片路径传入diff方法中进行比较。在进行图片替换后，使用onload方法等待图片加载完成后再次调用diff方法进行比较即可。
总结
使用x-img-diff-js可以方便地进行DOM截图比较、图片替换等操作。在使用时需要注意一些参数和选项的配置，根据具体的使用场景进行调整，以达到更理想的比较结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70844