在前端开发中，有时候需要对图片进行对比，以判断图片的相似度。对于这种需求，我们可以使用 npm 包 img-diff-js。该包是一个基于 JavaScript 的图像比较工具。
安装
在使用 img-diff-js 之前，我们需要先安装它。我们可以使用 npm 进行安装。
npm install --save img-diff-js
在安装成功之后，我们就可以使用它了。
使用
使用 img-diff-js 可以很方便地比较两个图片的差异。下面是一段示例代码：
-- -------------------- ---- ------- ----- ------- - ----------------------- ----- -------- - ------------------- ----- -------- - ------------------- ----------------------- ------------ --------- ------------ --------- ------------- ----- ---------------- -- - ----------------- ---- -- --- ------ ----- ------------------- ---
在这段示例代码中，我们首先引入了 img-diff-js 包，并且定义了两个变量，分别代表两张要比较的图片的路径。然后，我们使用 ImgDiff.getFullResult() 方法进行比较。该方法返回一个 Promise，我们可以在其 then() 方法中获取比较结果。
在使用 getFullResult() 方法时，我们需要对其传入一个包含下列参数的对象：
- imageAPath：要比较的第一张图片的路径。
- imageBPath：要比较的第二张图片的路径。
- composition：是否需要显示比较后的差异。如果为 true，在返回的结果中会包含一张新图片，该图片标示出了比较后的两张图片的差异。
在返回的结果中，我们可以获取到两张图片的相似度。在示例代码中，我们通过 result.percentage 获取到两张图片的差异百分比。当百分比越高，代表两张图片越不相似。
深度剖析
img-diff-js 是如何进行图片比较的呢？
首先，img-diff-js 使用了图像处理库 Jimp。它可以将图片加载到内存中，并允许我们对图片进行操作。在进行比较之前，img-diff-js 首先判断了两张图片的尺寸是否相等。如果两张图片的尺寸不同，那么它们一定不相似。如果两张图片尺寸相等，img-diff-js 会按照一定的步骤将两张图片进行比较。
首先，img-diff-js 会将两张图片转换成灰度图。灰度图相比于 RGB 图，具有更好的鲁棒性和更简洁的特征。然后，img-diff-js 使用 均值哈希算法 对两张灰度图进行处理，产生两个 64 位的哈希值。这两个哈希值就代表了两张灰度图的特征信息。
最后，img-diff-js 对这两个哈希值进行比较。两个哈希值之间的差异越少，代表两张灰度图越相似。如果两张灰度图足够相似，img-diff-js 认为它们是一样的，否则就认为它们不一样。比较结束后，img-diff-js 将得到两张图片的相似度。
常用应用
img-diff-js 可以用于很多场景。下面我们简单介绍几个常见的应用场景。
自动化测试
在自动化测试中，我们常常需要对界面进行比较。可以使用 img-diff-js 进行界面截图的比较，以判断页面是否正确显示。如果页面显示错误，那么两张截图的哈希值就会有差异。在这种情况下，我们可以很方便地定位到具体的问题。
图片压缩
在图片压缩时，为了减少图片大小，可能需要对图片进行压缩、切割等操作。如果我们需要保留原图片的某些信息，就需要对处理后的图片进行比较，以检测是否有信息遗漏或不正确的情况。例如，我们希望将一张大图片切割成多张小图片，并保证切割后的每张图片都具有原图的某种特征。
图像分析
在图像分析中，我们常常需要对大量图片进行分类或聚类操作。可以使用 img-diff-js 进行图片相似度的计算，以将相似的图片划分进同一类别。例如，希望将一组照片根据人物进行分组。
结论
在本文中，我们介绍了 npm 包 img-diff-js 的安装、使用方法和原理，并简单介绍了它的常见应用场景。使用 img-diff-js 可以很方便地进行图片比较，适用于多种前端开发、测试和图像处理场景。如果您还没有尝试过 img-diff-js，可以尝试一下它，相信它会给您带来更高的开发效率和更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70839