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

用于比较 PNG 图像的 JavaScript API

支持在 JavaScript 应用程序中比较 PNG 图像的开源 JavaScript 库。它支持通过忽略抗锯齿和忽略插入符号来比较 PNG 图像。 

使用 JavaScript 将图像与图像进行比较可能非常困难和具有挑战性。选择错误的工具也会极大地影响性能。 LooksSame 是一个开源 JavaScript 库，它包含了在 JavaScript 应用程序中比较 PNG 图像的功能，并且可以在每台机器上开箱即用。该库是在考虑人类颜色感知的同时创建的。该库主要是为 Gemini 实用程序的视觉回归测试需求而创建的。

该库允许开发人员使用 JavaScript 命令轻松快速地比较两个 PNG 图像之间的差异。它通过提供缓冲区内的文件或图像的路径来支持处理 PNG 图像。使用默认设置将仅识别显着差异，如果您需要检测任何特定差异，请选择严格选项。

该库提供了对与图像比较相关的几个重要功能的支持，例如比较图像与忽略插入符号、比较图像与忽略抗锯齿、获取差异边界、获取差异集群、构建差异图像、构建差异图像作为缓冲区、比较颜色和还有很多。

Previous Next

LooksSame 入门

通过 NPM 安装 LooksSameis 的推荐方式。请使用以下命令进行安装。

通过 NPM 安装 LooksSame

 npm install looks-same

比较 JavaScript 应用程序中的 PNG 图像

LooksSame 库使软件程序员能够使用 Node.js 以编程方式比较他们的 PNG 图像。您需要提供 PNG 图像或缓冲区的正确路径作为参数。图像比较的一个简单示例可以是使用图像截取 DOM 元素的屏幕截图，并使用库将其与本地图像进行比较。您还可以使用 RequestLogger 记录对图像的请求，并使用 Buffer.compare() 方法将响应正文与本地文件进行比较。

通过JavaScript API比较NG图像

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

通过忽略抗锯齿来比较 PNG 图像

每个图像都由像素组成，在比较这些图像时，您将图像中每个像素的颜色与图像相应位置的像素颜色进行比较。因此，如果某些像素不相似，那么您可以判断图像不匹配。通常，当图像的分辨率非常低，处理器无法正确渲染平滑线条时，就会发生混叠。 抗锯齿技术用于提供更平滑的外观，因此您可以在每个环境中获得不同的比较结果。由于抗锯齿，一些图像在比较它们时存在差异。 LooksSame 库通过忽略可能发生抗锯齿的某些像素来处理抗锯齿问题。默认情况下，这些差异将被忽略。

Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The 抗锯齿 technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with 抗锯齿 issues by ignoring certain of the pixels where 抗锯齿 is likely to have occurred. These differences will be ignored by default.

通过 JavaScript 忽略抗锯齿和插入符号来比较图像

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

忽略插入符号的图像比较

免费的 LooksSame 库提供了在比较它们自己的应用程序中的两个图像时忽略输入框上的插入符号的功能。文本输入元素中的文本插入符号对于视觉回归任务来说是一种痛苦，因为它总是在闪烁。有时在比较两个文本框或输入框图像时，由于图像给出插入符号，比较因像素差异而失败。因此，您可以忽略插入符号选项以禁用忽略此类差异。

 中国人