"Submitted object was not an image" when isImage = true?

[chocochik92]

I am really confused about this. When I have console.log(imagediff.isImage(chartImage)) it returns true, but this expect(image1).toImageDiffEqual(image2) returns an error saying "Submitted object was not an image". I also get an error when doing imagediff.equal(chartImage, image2) and that one says "Image or Canvas expected".

I'm using "imagediff": "^1.0.6", "canvas": "^1.2.7" and node v0.12.2, and I'm using a Mac. Can I get some help?

[cburgmer]

Can you provide a minimal script, maybe with the image in question inlined via data URI (possibly using this example)?

Thanks for the versions, that'll help debugging.

[chocochik92]

Here's my relevant code. The data URI is extremely long.

var imagediff = require('../../../node_modules/imagediff/js/imagediff.js');
var Canvas = require('canvas');
var fs = require('fs');
var path = require('path');
var filePath;
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) {
  filePath = 'images/' + fileName + '-test.png';
  fs.writeFile('lib/' + filePath, 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);
}
function compareImages () {
    //because of Protractor
    browser.driver.executeScript(function() {
      var can = document.querySelector('#workspace-canvas');
      var img = new Image();
      img.src = can.toDataURL('image/png');
      var img2 = resizeImage(img, 1000, 625);
      var data = img2.src;
      function resizeImage(img, w, h) {
        var imageResized = new Image();
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        canvas.getContext('2d').drawImage(img, 0, 0, w, h);
        imageResized.src = canvas.toDataURL('image/png');
        return imageResized;
      }
      return data;
    }).then(function(result) {
      browser.sleep(2000);
      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;
          console.log(image1,image2); //[Image:1888x1122 complete] [Image:1888x1122 complete]
          console.log(imagediff.isImage(image1)); //true
          console.log(imagediff.isImage(image2)); //true
          expect(image1).toImageDiffEqual(image2); //"Submitted object was not an image." ???
          console.log(imagediff.equal(image1,image2,100); //"Image or Canvas expected" ???
          done();
        });
      });
    });
  } 

[chocochik92]

So what I ended up doing was cloning this project and then using that imagediff.js file. That got rid of the error when doing imagediff.equal(image1,image2) but I still have the toImageDiffEqual error. I might just use the .equal method.

[cburgmer]

It looks like I cannot run your example without further setup/code. It looks like upgrading the imagediff version might fix some of you issues?

What version of Jasmine are you using. There is still an unmerged branch here, that offers jasmine 2.0 support. https://github.com/HumbleSoftware/js-imagediff/commits/v1.1

[chocochik92]

I am using Jasmine 2.0, so I'm using that branch now.

I get a different error now, with isImage and isImageType still true.

Expected [object Image] to image diff equal [object Image].

[tehvgg]

I believe this is caused by an update to the expected output format from custom matchers in recent Jasmine releases. I've fixed this on my fork, submitting a PR shortly.