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

（我正在用量角器和Jasmine进行测试，我的项目中也包括了节点画布。）

我需要比较两张图片，确保它们是相同的。一个保存在我的文件结构中，另一个从画布创建。我可以将画布转换为图像，也可以从文件中加载图像。以下是我所拥有的：

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会起作用，但事实并非如此。我真的很想使用图像差异，但我不知道如何做到这一点。请帮帮我

的API具有

imagediff.equal（a，b）

函数，该函数可以获取2个

Image

对象，在这种情况下应该对您有所帮助

---

如果这对您没有帮助，您可以使用md5对它们进行哈希运算，并确保校验和相等，这方面的详细信息，。

以下是我最终的做法。我使用

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

---

看看，它允许在被测试的页面上注入和执行自定义代码，并从那里返回值到测试。我想我会给你奖励，因为你是唯一一个写了答案的人