在JavaScript中比较两个图像

Question

我试图确定javascript中的两个图像是否相同(即使src网址不同).

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

谢谢

Answer 1

不,没有特别简单的方法可以做到这一点.JavaScript不是用于处理低级操作,例如直接处理二进制数据,例如图像处理.

您可以使用<canvas>元素对每个图像进行base64编码,然后比较生成的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来解析图像数据,使用canvas来渲染图像差异.

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

正如您所看到的,Rembrandt还允许您引入阈值,如果您的域需要在颜色或像素差异方面有一些余地.由于它既可以在浏览器中运行,也可以在服务器(节点)上运行,因此可以轻松集成到测试套件中.

Answer 4

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