Question

（我正在使用Protractor和Jasmine进行测试，我还在项目中包含image-diff和node-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();
      });
    });
  });
});

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

2 个答案: