Images generated with phantomcss cannot be loaded and compared
Polvista opened this issue · comments
I use phantomcss with SlimerJS.
Phantomcss generate images correctly, but resemble cannot load them to compare.
Here is why:
Phantomcss passes images as File
objects and they gets converted to base64 string by FileReader
. Then this happens:
var hiddenImage = new Image();
hiddenImage.setAttribute("crossorigin", "anonymous");
hiddenImage.src = event.target.result; //base64 string
Because of crossorigin
attribute image can't be loaded, see http://stackoverflow.com/questions/31643096
Line hiddenImage.setAttribute("crossorigin", "anonymous");
should only be added if fileData
is string, I suppose.
This should be fixed in PhantomCSS now.
Resemble now exposes the following, which PhantomCSS invoked by default.
resemble.outputSettings({
useCrossOrigin: false
});
This'll remove the crossorigin attribute.