Open chocochik92 opened 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.
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();
});
});
});
}
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.
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
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].
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.
I am really confused about this. When I have
console.log(imagediff.isImage(chartImage))
it returnstrue
, but thisexpect(image1).toImageDiffEqual(image2)
returns an error saying "Submitted object was not an image". I also get an error when doingimagediff.equal(chartImage, image2)
and that one says "Image or Canvas expected".I'm using
"imagediff": "^1.0.6"
,"canvas": "^1.2.7"
andnode v0.12.2
, and I'm using a Mac. Can I get some help?