比较JavaScript中的两个图像

| 我试图确定两个图像在javascript中是否相同（即使src网址不同）。我的特定用例在chrome扩展程序内（尽管这不是chrome扩展程序并没有真正考虑到这个问题）。通过将img src设置为：，我可以获取存储在chrome内部数据库中的favicon png的imgage： \'chrome://favicon/\'+url，其中url为网站的实际URL。但是，我现在要查找所有唯一的图标。假设它们都将使用不同的内部数据库URL，是否有一种简单的方法可以比较javascript中的图像？谢谢

已邀请:

4 个回复

疼嘶桐

不，没有特别简单的方法可以做到这一点。 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/

要回复问题请先登录或注册

比较JavaScript中的两个图像

4 个回复

发起人

javascript

image

compare

问题状态

比较JavaScript中的两个图像

与内容相关的链接

4 个回复

发起人

javascript

image

compare

问题状态