1. 产品
  2.   图片
  3.   JavaScript
  4.   pixelmatch
 
  

用于比较图像的开源 JavaScript API

JavaScript 库使软件程序员能够在 Node 或浏览器等多种环境中比较两个图像。

有时需要比较两个图像以查看它们的相似程度。这是一个非常复杂的过程，需要良好的知识来完成它。开源像素匹配库对于在任何环境中比较两个图像都是非常有用的选择。由于该库没有依赖关系并且适用于图像数据的原始类型数组，因此可以在多个环境中使用，如 Node 或浏览器等。

pixelmatch 体积非常小，使用起来非常简单，但却是一个非常快速的像素级图像比较库。它是用 JavaScript 编写的，最初是为了比较测试中的屏幕截图而创建的。该库支持抗锯齿像素检测和感知色差指标等功能。

抗锯齿检测是一个非常有用的功能，因为通常观察到在不同的应用程序、设备或操作系统上渲染相同的数据会产生略微不同的结果。但大多数情况下，建议忽略这些小差异或测试以捕获更有意义的数据。

Previous Next

像素匹配入门

安装 pixelmatch 的推荐方法是通过 NPM。请使用以下命令进行安装。

通过 NPM 安装像素匹配

 npm install pixelmatch

什么是像素匹配测试？

如果您需要比较两个图像以检查它们之间是否有任何差异，那么您可以为此目的使用像素匹配测试。可以有两种类型的图像，原始图像和修改 图像。您可以使用可以从应用程序的屏幕截图中获取图像的应用程序，然后，可以使用图像比较库来比较这些图像并显示结果。

通过 JavaScript 库比较图像

开源库 pixelmatch 提供了完整的功能，可以轻松比较 JavaScript 应用程序中的图像。软件开发者需要提供用于比较的图像数据以及需要写入具有差异的图像数据的输出位置。他们还需要提供尺寸，即三个图像的宽度和高度。您可以使用允许图像略有不同的阈值选项，这在某些情况下可能很棒。请注意，pixelmatch 库需要图像必须具有相同的大小。

通过JavaScriptAPI在线比较图像

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);

Node。j中通过像素匹配的比较图像

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
 中国人