backstop-twentytwenty 是一款基于 backstop.js 的 npm 包，它可以用来快速比对两张图片之间的差异，并生成一张带有对比结果的图片。该包使用了 TwentyTwenty jQuery 插件，可以方便实现对比图片的展示和操作。
在前端开发过程中，我们经常需要进行图片比对。比如产品交付后，需要确认网站暂时页面和终态页面之间的差异；开发调试过程中，也需要对比代码修改前后的效果差异等等。backstop-twentytwenty 可以帮助我们快速且准确地完成这些任务。
本教程将详细介绍如何使用 backstop-twentytwenty 包进行两张图片的比对，并自动生成对比结果的图片。
安装 backstop-twentytwenty
安装 backstop-twentytwenty 包，需要同时安装以下两个 npm 模块：
- backstop.js
- twentytwenty
可以在命令行中使用以下代码安装：
npm install backstop-twentytwenty --save-dev
通过以上命令，backstop-twentytwenty 包会自动安装对应的 backstop.js 和 twentytwenty 依赖。
使用 backstop-twentytwenty 进行图片比对
准备对比图片
在使用 backstop-twentytwenty 进行图片比对之前，需要准备好待比对的图片。这些图片可以是本地文件路径或者网络路径。
下面以本地图片路径为例，定义如下两个变量：
const beforeImagePath = './path/to/before/image.png'; const afterImagePath = './path/to/after/image.png';
创建比对配置文件
backstop-twentytwenty 使用 backstop.js 进行图片比对，需要在项目根目录下创建并配置 backstop.json 文件。该文件描述了待比对图片的设置、相似度阈值、结果文件路径等信息。
在 backstop.json 中，可以配置将图片转换为 base64 格式或者保留图片路径等选项，可以自行选择。
下面是一个示例的 backstop.json 配置文件：
-- -------------------- ---- -------
-
----- ------------------------
------------ -
-
------- ----------
-------- -----
--------- ---
-
--
------------ -
-
-------- ------ ---------- ------
------ ---------------------
--------------- ---
------------- ---
-------- -----
---------------------- -----
------------ -
-------------------------
--
-------------------- -----
-------------------- ----
------------------------ ----
-
--
-------- -
-------------------- ----------------------------------
--------------- -----------------------------
----------------- -------------------------------
-------------- ----------------------------
------------ -------------------------
--
--------- ------------
--------- ------------
-------- ------
-------------- -----
-在该配置文件中，我们需要指定：
scenarios：表示待进行比对的场景；selectors：表示比对的元素选择器，这里设置为 ".twentytwenty-container"，表明使用 twentytwenty 插件来执行图片对比；misMatchThreshold：用于控制比对结果的相似度阈值。0~100 之间的数字，范围越大则结果越宽松，并不会太过严格；paths：表示输出结果的路径
运行 backstop-twentytwenty
在准备好对比文件和配置之后，我们来运行 backstop-twentytwenty 进行两张图片的比对。
使用以下代码，在命令行中启动比对：
npx backstop test --config=backstop.json
运行成功后，图片比对结果将会输出至配置文件 paths.html_report 所定义的路径中。
结论
本文介绍了如何使用 npm 包 backstop-twentytwenty 版本在前端开发过程中进行图片比对。通过读者对本文的研习，相信读者完成了一项有实际应用意义的技能，能够内容化运用在项目开发的过程中，为公司和个人提升了效益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f40cf5bdbf7be33b2567239