在 JavaScript 中比较两个图像

Question

我试图确定 JavaScript 中的两个图像是否相同（即使源 URL 不同）。

我的具体用例是在 Chrome 扩展程序中（尽管这是一个 Chrome 扩展程序并没有真正考虑到问题）。我可以通过将 img src 设置为：来获取存储在 Chrome 内部数据库中的 favicon png 图像： 'chrome://favicon/'+url 其中“url”是网站的实际 URL。但是，我现在想找到所有独特的图标。鉴于它们都有不同的内部数据库 URL，是否有一种简单的方法可以在 JavaScript 中比较图像？

Answer 1

不，没有特别简单的方法来做到这一点。 JavaScript 并不是为处理低级操作而设计的，例如直接处理二进制数据以进行图像处理。

您可以使用元素对每个图像进行base64编码< /a>，然后比较生成的 base64 字符串，但这只会告诉您是否图像是相同的。

要使用 getBase64Image 函数（在我链接的答案中定义）来比较两个图像：

var a = new Image(),
    b = new Image();
a.src = 'chrome://favicon/' + url_a;
b.src = 'chrome://favicon/' + url_b;

// might need to wait until a and b have actually loaded, ignoring this for now
var a_base64 = getBase64Image(a),
    b_base64 = getBase64Image(b);

if (a_base64 === b_base64)
{
    // they are identical
}
else
{
    // you can probably guess what this means
}

Answer 2

我想您可能对这个名为 resemble.js 的 JavaScript 库感兴趣，其中：

使用 HTML5 画布和 JavaScript 分析和比较图像。

Resemble.js 可用于您可能有的任何图像分析和比较要求浏览器。但是，它是为 https://github.com/Huddle/PhantomCSS 强大的视觉回归库 PhantomCSS。 PhantomCSS 需要能够忽略抗锯齿，因为这会导致来自不同机器的屏幕截图之间存在差异。

Resemble.js 使用 HTML5 File API 解析图像数据，并且用于渲染图像差异的画布。

Answer 3

我们刚刚发布了一个轻量级库 RembrandtJS，它正是这样做的，并且它可以使用 HTML5 Canvas2D API 在浏览器中运行以及在服务器上通过嵌入式 Node.JS 替换节点画布。
它接受 blob 和 url 作为图像源，因此您可以简单地执行此操作：

const rembrandt = new Rembrandt({
  // `imageA` and `imageB` can be either Strings (file path on node.js,
  // public url on Browsers) or Buffers
  imageA: 'chrome://favicon/' + url_a,
  imageB: 'chrome://favicon/' + url_b,

  thresholdType: Rembrandt.THRESHOLD_PERCENT,

  // The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS
  maxThreshold: 0,

  // Maximum color delta (0...255):
  maxDelta: 0,

  // Maximum surrounding pixel offset
  maxOffset: 0,

})

// Run the comparison
rembrandt.compare()
  .then(function (result) {

    if(result.passed){
      // do what you want
    }
  })

如您所见，如果您的域需要在颜色或像素差异方面有一定的余地，Rembrandt 还允许您引入阈值。由于它可以在浏览器和服务器（节点）上运行，因此可以轻松集成到您的测试套件中。

Answer 4

也许这个工具会有所帮助：
https://github.com/HumbleSoftware/js-imagediff/

Answer 5

这可能是一个非常古老的线程，当我需要实现逐像素比较 2 个图像而不是相似性比较的相同目标时，我遇到了它。我发现了一个非常快速且易于使用的 PNG 图像逐像素比较工具 js 库。这是存储库提供的一个简单示例：

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));

它甚至为您生成一个差异图像。请注意，这不是感性比较。还有其他用于此目的的工具。
以下是 GitHub 上像素匹配的链接：
github 上的像素匹配

Answer 6

这是在浏览器中使用 Pixelmatch 且无需捆绑的完整、可运行的示例。

const prepareImgCtx = img => {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  return ctx;
};

const imgDiff = (imgA, imgB, canvasDiff) => {
  const ctxA = prepareImgCtx(imgA);
  const ctxB = prepareImgCtx(imgB);
  canvasDiff.width = imgA.width;
  canvasDiff.height = imgA.height;
  const diffCtx = canvasDiff.getContext("2d");
  const diff = diffCtx.createImageData(imgA.width, imgA.height);
  const mismatchedPixels = pixelmatch(
    ctxA.getImageData(0, 0, imgA.width, imgA.height).data,
    ctxB.getImageData(0, 0, imgB.width, imgB.height).data,
    diff.data,
    imgA.width,
    imgA.height,
    {threshold: 0.1}
  );
  diffCtx.putImageData(diff, 0, 0);
  return mismatchedPixels;
};

const imageLoaded = async img => {  
  img.crossOrigin = "anonymous";
  img.setAttribute("crossOrigin", "");
  await img.decode();
  return img;
};

(async () => {
  const imgs = [...document.querySelectorAll("img")];
  await Promise.all(imgs.map(imageLoaded));
  const canvasDiff = document.createElement("canvas");
  document.body.prepend(canvasDiff);
  console.log("mismatched pixels:", imgDiff(...imgs, canvasDiff));
})();

<script src="https://bundle.run/[email protected]"></script>
<img src="https://picsum.photos/id/3/200/200">
<img src="https://picsum.photos/id/5/200/200">

Answer 7

基于浏览器的文件比较

此答案解决了关于一个已关闭的重复问题 q/73314528/5217142">如何在浏览器中比较两个图像，例如打开或拖放到页面上，不使用画布或base64。

高级答案是获取每个文件的数组缓冲区，使用它们创建数据视图或实际类型化数组并逐字节检查它们。

这个简单的示例说明了原理，做出了一些可以通过使用

• Blob.arrayBuffer 为文件数据缓冲区创建 Promise，以及
• new Uint8Array 构造类型化数组，而不是创建 DataView 对象。

"use strict";
function checkFiles( event) {
    //console.log(event);
    //console.log(this);
    
    const files = Array.from(event.target.files);
    if( files.length !=2) {
        console.log( "Expected 2 files to compare");
        return;
    }
    Promise.all(files.map(file=>file.arrayBuffer()))
    .then( buffers =>  {          
         const [f1, f2] = buffers.map( buffer => new Uint8Array( buffer));
         if( f1.length!=f2.length) {
              return false;
         }
         if( f1.length == 0) {
              console.warn("Files have zero length");
              return true;
         }
         let i = 0;
         for(; i<f1.length; ++i) {
              if( f1[i] != f2[i]) return false;
         }
         return true;
    })
    .then( same=> {
        console.log( same ? "same" : "different");
    })
    .catch(err=>console.error(err));
}

<input type=file multiple onchange="checkFiles.call(this, event)">

为了提高效率，代码片段的生产版本可以使用 file 对象的 size 属性来检查文件之前是否具有相同的非零长度读取它们以便逐字节比较它们的内容。

Answer 8

如果其他人像我一样最终来到这里，因为他们试图比较 Node javascript 中的两个图像，我就能够利用 Node 的Buffer 将 gif 作为 AWS S3 对象转换为 Base64 并对其进行测试。

在 CypressJS 中使用它来测试发送到 S3 的图像，然后在测试中使用 s3.getObject() 返回图像

const imageToBase64 = Buffer .from(image.Body).toString('base64');