比较文件中的图像和从 canvas 创建的图像

Question

（我正在使用 Protractor 和 Jasmine 进行测试，我还在我的项目中包含了 image-diff 和 node-canvas。）

我需要比较两张图片并确保它们相同。一个保存在我的文件结构中，另一个是从 canvas 创建的。我能够将 canvas 转换为图像并从文件中加载图像。这是我拥有的：

var imagediff = require('../node_modules/js-imagediff/js/imagediff.js');
var Canvas = require('canvas');
var fs = require('fs');
var path = require('path');
beforeEach(function () {
  jasmine.addMatchers(imagediff.jasmine);
});
function loadImage (url, callback) {
  var image;
  fs.readFile(url, function (error, data) {
    if (error) throw error;
    image = new Canvas.Image();
    image.onload = function () {
      callback(image);
    };
    image.src = data;
  });
  return image;
}
it('should work', function () { 
 //executeScript is needed to get the canvas element and convert it
 browser.driver.executeScript(function() {
    var can = document.querySelector('#workspace-canvas'); 
    var ctx = can.getContext("2d");
    var data = can.toDataURL("image/png");
    var img = new Image();
    img.src = data;
    //this code below shows that the image was converted properly
    // var link = document.createElement('a');
    // link.href = img.src;
    // link.download = 'image1.png';
    // link.click();
    return data;
  }).then(function(result) {
    newData = result;
    var imgPath = path.join(__dirname, './images/image1.png');
    loadImage(imgPath, function(image) {
      console.log('loadImage');
      var canvas = new Canvas();
      canvas.width = image.width;
      canvas.height = image.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0);
      var data = canvas.toDataURL("image/png");
      oldData = data;
      //TODO: do a comparison here! 
      done();
    });
  });

我的问题是如何比较两张图片并确保它们相同？我认为比较数据 URI 会起作用，但它不起作用。我真的很想使用 image-diff，但我不确定该怎么做。请帮助我！

Answer 1

imagediff 的 API 具有 imagediff.equal(a,b) 函数，它获取 2 个 Image 对象，在这种情况下应该对您有所帮助。

如果这对您没有帮助，您可以随时对它们进行 md5 哈希并确保校验和相等，有关此的更多信息md5, checksum。

Answer 2

这是我最终的做法。我使用 fs.writeFile 将新图像保存到我的项目中，然后加载该图像并将两个图像与 image-diff 进行比较。

var imagediff = require('../node_modules/js-imagediff/js/imagediff.js');
var Canvas = require('canvas');
var fs = require('fs');
var path = require('path');
beforeEach(function () {
  jasmine.addMatchers(imagediff.jasmine);
});
function loadImage (url, callback) {
  var image;
  fs.readFile(url, function (error, data) {
    if (error) throw error;
    image = new Canvas.Image();
    image.onload = function () {
      callback(image);
    };
    image.src = data;
  });
  return image;
}
function writeFile (buffer, fileName) {
  fs.writeFile(fileName, buffer, function (err) {
    if(err) { console.log('ERROR', err); }
  });
}
function dataURItoBuffer (dataURI, fileName) {
  var byteString = dataURI.split(',')[1];
  var buffer = new Buffer(byteString, 'base64');
  writeFile(buffer, fileName);
}
it('should work', function () { 
  //fileName is defined somewhere else
  var filePath = './images' + fileName + '.png';
  //executeScript is needed to get the canvas element and convert it
  browser.driver.executeScript(function() {
    var can = document.querySelector('#workspace-canvas'); 
    var ctx = can.getContext("2d");
    var data = can.toDataURL("image/png");
    return data;
  }).then(function(result) {
    dataURItoBuffer(result, fileName);
    var oldImagePath = path.join(__dirname, './images/' + fileName + '.png');
    var newImagePath = path.join(__dirname, filePath);
    loadImage(oldImagePath, function(image) {
      image1 = image;
      loadImage(newImagePath, function(image){
        image2 = image;
        expect(imagediff.equal(image1, image2, 50)).toBeTruthy(); // 50 pixel tolerance
        done();
      });
    });
  });
});

比较文件中的图像和从 canvas 创建的图像

Compare image from file and image created from canvas

javascript

canvas

jasmine

protractor