比较JavaScript中的两个图像

如何解决比较JavaScript中的两个图像

| 我试图确定两个图像在javascript中是否相同（即使src网址不同）。 我的特定用例在chrome扩展程序内（尽管这不是chrome扩展程序并没有真正考虑到这个问题）。通过将img src设置为：，我可以获取存储在chrome内部数据库中的favicon png的imgage：

\'chrome://favicon/\'+url

，其中url为网站的实际URL。但是，我现在要查找所有唯一的图标。假设它们都将使用不同的内部数据库URL，是否有一种简单的方法可以比较javascript中的图像？ 谢谢     

解决方法

不，没有特别简单的方法可以做到这一点。 JavaScript并非用于处理低级操作，例如直接使用二进制数据进行图像处理。 您可以使用

<canvas>

元素对每个图像进行base64编码，然后比较生成的base64字符串，但这只会告诉您图像是否相同。 要使用“ 2”功能（在我链接的答案中定义）比较两个图像：

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
}

    ,我认为您可能对这个名为resemble.js的JavaScript库感兴趣，该库：   使用HTML5 canvas和JavaScript分析和比较图像。      Resemble.js可用于您可能在浏览器中进行的任何图像分析和比较要求。但是，它是由https://github.com/Huddle/PhantomCSS支持的视觉回归库PhantomCSS设计和构建的。 PhantomCSS需要能够忽略抗锯齿，因为这会导致从不同机器衍生的屏幕截图之间的差异。      Resemble.js使用HTML5 File API解析图像数据，并使用canvas渲染图像差异。     ,我们刚刚发布了一个轻量级的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
    }
  })

如您所见，如果您的域需要有关颜色或像素差异的余地，伦勃朗还可以引入阈值。由于它既可以在浏览器中运行，又可以在服务器（节点）上运行，因此可以轻松集成到您的测试套件中。     ,也许此工具会有所帮助： https://github.com/HumbleSoftware/js-imagediff/