如何使用Node.js比较两个图像

时间:2013-08-29 12:22:05

标签: node.js image-processing automated-tests image-comparison

我正在寻找一种方法来比较两个图像,看看它们有多相似。谷歌搜索产生大量的图像处理结果(裁剪,重新调整大小等),但没有任何东西可以做图像的近似比较。有一个Node.js库,但它是版本0.0.1并且依赖于各种第三方系统包,因此不稳定或不可移植。

这些方面的东西:

var imgComparator = require('some-awesome-image-comparator-module');
// result would be between 1.0 and 0.0, where 1.0 would mean exact match
var result = imgComparator.compare('/path/to/image/1.png', '/path/to/image/2.png');

4 个答案:

答案 0 :(得分:10)

node-opencv模块,你可以使用它来执行像图像比较这样繁重的操作。关于这方面的好主题是:Simple and fast method to compare images for similarity

答案 1 :(得分:8)

还有image-diff看起来非常有前途,它是由优步制作的。

var imageDiff = require('image-diff')

imageDiff({
  actualImage: 'checkerboard.png',
  expectedImage: 'white.png'
}, function (err, imagesAreSame) {
  // error will be any errors that occurred
  // imagesAreSame is a boolean whether the images were the same or not
  // diffImage will have an image which highlights differences
})

答案 2 :(得分:3)

我找到了这个可能对你有用的库

https://github.com/HumbleSoftware/js-imagediff

答案 3 :(得分:0)

image-diff已过时。

来自他们的github:

  

我们在该项目上不再有任何积极的维护者,因此   结果停止了维护。

     

作为替代,请查看其他项目,例如外观相同和   像素匹配:

     

https://github.com/gemini-testing/looks-same

     

https://github.com/mapbox/pixelmatch

我个人使用pixelmatch:

  

最小,最简单,最快的JavaScript像素级图像   比较库,最初是用来比较屏幕截图的   测试。

     

具有准确的抗锯齿像素检测和感知颜色的功能   差异指标。

     

受Resemble.js和Blink-diff的启发。与这些库不同,   pixelmatch大约有150行代码,没有依赖性,可以正常工作   在原始类型的图像数据数组上,因此速度非常快,并且可以   在任何环境(节点或浏览器)中使用。

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

const difference = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

fs.writeFileSync('diff.png', PNG.sync.write(diff)); // see diff.png for the difference

const compatibility = 100 - dif * 100 / (width * height);
console.log(`${difference} pixels differents`);
console.log(`Compatibility: ${compatibility}%`);

在此处找到演示:https://observablehq.com/@mourner/pixelmatch-demo

https://github.com/mapbox/pixelmatch