Question

我正在尝试确定javascript中的两个图像是否相同（即使src网址不同）。

我的特定用例是在chrome扩展中（虽然这是一个chrome扩展并不真正考虑到这个问题）。通过将img src设置为：我可以获得存储在chrome内部数据库中的favicon png的行李： 'chrome://favicon/'+url其中网址是网站的实际网址。但是，我现在想找到所有独特的favicons。鉴于它们都将具有与内部数据库不同的URL，是否有一种简单的方法来比较javascript中的图像？

由于

Answer 1

不，没有特别的简单方式来做到这一点。 JavaScript不是用于处理低级操作，例如直接处理二进制数据，例如图像处理。

您可以use a <canvas> element to base64 encode each image，然后比较生成的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替换node-canvas在服务器上运行。它接受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
    }
  })

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

Answer 4

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

在JavaScript中比较两个图像

4 个答案: