在前端开发中，我们常常需要比较两张图片的相似度，以便进行美工或者测试验证。npm 上提供了一个实用工具 resemble-cli，它可以用于比较图片的相似度。在本文中，我们将详细介绍如何使用 resemble-cli 实现图片比较功能，并给出一些实用示例。
概述
resemble-cli 是一个 npm 包，它使用 Resemble.js 进行图片比较，并提供了命令行界面。Resemble.js 是一个 JavaScript 库，用于比较并分析两张图片之间的差异。同时，它还提供了一些视觉效果来显示这些差异。
resemble-cli 的安装非常简单。只需要在命令行上安装即可：
npm install -g resemble-cli
安装完成后，我们就可以开始使用它。
使用
resemble-cli 主要是通过命令行进行操作。它的命令格式为：
resemble [options] <file1> <file2>
具体命令参数的含义如下：
- options：可选参数，用于配置图片比较相关的选项。
- file1：必要参数，需要与 file2 进行比较的第一张图片。
- file2：必要参数，需要与 file1 进行比较的第二张图片。
在这三个参数中，只有文件路径是必要的。其余参数均可以根据需要忽略。
比较图片
要比较两张图片，我们只需要在命令行上输入两张图片的路径即可。例如，要比较 image1.jpg 和 image2.jpg 两张图片：
resemble image1.jpg image2.jpg
比较完成后，resemble-cli 会在命令行界面上输出比较结果。输出的结果包括两张图片的比较结果和差异图像。差异图像以红色和透明的形式显示，其中红色表示两张图片不同的部分。
比较选项
resemble-cli 还提供了一些比较选项，用于配置比较过程中的某些参数。比如，我们可以通过 --output 选项来调整输出的图片格式。常见的图片格式有 png、jpeg、bmp 等等。假设我们要将输出的图片格式设为 png：
resemble --output png image1.jpg image2.jpg
resemble-cli 还提供了其他一些可选的选项。这些选项可以通过 --help 命令查看，或者通过阅读 npm 包的文档获得。
示例
接下来，我们将提供一些使用 resemble-cli 的实用示例。这些示例包括基础命令、命令选项和使用 Resemble.js 模块的示例等。
基础命令
这些基础命令用于演示如何使用简单的命令比较两张图片。
resemble image1.jpg image2.jpg
比较 image1.jpg 和 image2.jpg 两张图片。
resemble path/to/image/dir/*.*
比较目录下所有图片。
resemble path/to/image.jpg image.gif
比较不同格式的图片。
命令选项
这些命令选项用于演示如何使用选项调整比较设置和生成结果。
resemble --threshold 5 image1.jpg image2.jpg
指定比较阈值为 5。
resemble --ignore-color image1.jpg image2.jpg
忽略颜色进行比较。
resemble --output bmp image1.jpg image2.jpg
将输出的图片格式设为 bmp。
resemble --report test-report.html image1.jpg image2.jpg
生成 HTML 报告并保存。
使用 Resemble.js
这些示例用于演示如何使用 Resemble.js 模块和 resemble-cli 结合。
-- -------------------- ---- -------
----
--- -- - --------------
--- -------- - ----------------------
--- ----------- - -------------------------------------------
--- ----------- - -------------------------------------------
-------------------------------------------------------------------------------------- -
-------------------------------------
---使用 Node.js 模块进行比较。
resemble path/to/screenshot1.png path/to/screenshot2.png --async --compare-path
使用 CLI 命令进行比较，但是引用 Resemble.js 模块。
结论
resemble-cli 是一个非常实用的 npm 包，它可以用于比较两张图片的相似度。无论是进行美工还是测试验证，都是非常实用的工具。在本文中，我们详细介绍了它的使用方法，并给出了大量的实用示例。我们相信，只要你熟练掌握了这些示例和技术，就可以轻松应对各种前端开发和测试验证的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef00619efcef77a054b759f