【问题标题】:How to compare two images using Node.js如何使用 Node.js 比较两个图像
【发布时间】:2013-08-29 12:22:04
【问题描述】:

我正在寻找一种方法来比较两张图片,看看它们有多相似。谷歌搜索它会产生大量的图像处理结果(裁剪、调整大小等),但无法对图像进行近似比较。有一个 Node.js 库,但它是 0.0.1 版本,并且依赖于各种 3rd 方系统包,因此不稳定或可移植。

类似的东西:

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

【问题讨论】:

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


    【解决方案1】:

    node-opencv 模块,您可以使用它来执行图像比较等繁重的操作。这方面的好话题在这里:Simple and fast method to compare images for similarity

    【讨论】:

      【解决方案2】:

      还有image-diff,看起来很有前途,是Uber做的。

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

      【讨论】:

      • 这是否要求图像相同?我正在寻找比较两个图像是否相似。即:同一建筑物的同一张照片,但由于不是同一张照片而略有不同。
      • fwiw,image-diff 是 imagemagick/graphicsmagick 的 compare 工具的薄包装。
      • 已弃用,取而代之的是 looks-samepixelmatch
      【解决方案3】:

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

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

      【讨论】:

      • 请让我了解最新情况,因为我还没有让它工作:)。
      • 在“bin/imagediff”中有一个如何使用lib的例子。使用canvas模块的保存版本作为imagediff,最新的似乎不兼容。阅读如何安装 canvas 和 cairo 的手册。我被困了很长时间,因为我错过了我需要将一个文件夹添加到我的 PATH 中。
      【解决方案4】:

      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

      【讨论】:

      • 但是像素匹配只适用于 PNG,我和作者有类似的问题,我需要使用 nodeJS 比较 2 张 jpg 图像,而像素匹配不适用于此...
      • 您可以使用sharp 将不同格式转换为PNG/PNG 缓冲区
      猜你喜欢
      • 2013-12-30
      • 2011-06-18
      • 1970-01-01
      • 2020-05-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-10
      • 2012-07-18
      相关资源
      最近更新 更多