HumbleSoftware / js-imagediff

JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.
http://humblesoftware.github.com/js-imagediff/
MIT License
788 stars 99 forks source link

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

Open chocochik92 opened 9 years ago

chocochik92 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 8 years ago

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.