Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chocochik92 opened this issue Oct 1, 2015 · 6 comments
Open

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

chocochik92 opened this issue Oct 1, 2015 · 6 comments

Comments

@chocochik92
Copy link

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
Copy link
Contributor

cburgmer commented Oct 2, 2015

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

cburgmer commented Oct 3, 2015

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
Copy link
Author

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
Copy link

tehvgg commented Oct 27, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants