Fabric.js: can not apply filters on image from cross origin

[wajipk]

We are using the following code to load images on canvas

fabric.Image.fromURL(src, function(oImg) { /* other options for images*/
canvas.add(oImg);
canvas.calcOffset();
}
});

image is loaded successfully on canvas, but when we apply filter on this image it will give a cross origin error. "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. "
i can't understand what is the problem.

Thanks in advance.
@kangax @Kienz

[robinflyhigh]

@wajipk Try This

fabric.Image.fromURL(src, function(oImg) {
  canvas.add(oImg);
  canvas.calcOffset();
},{crossOrigin: ''});

[wajipk]

oImg.crossOrigin = 'anonymous';

i m already using it like this in options

AND

When we use like you said then it throw an error
Image from origin '****URL Of image*****' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

[wajipk]

@kangax

Can you please tell me what is different between

fabric.Image.fromURL(src, function(oImg) { canvas.add(oImg); canvas.calcOffset(); },{crossOrigin: ''});

AND

fabric.Image.fromURL(src, function(oImg) { oImg.crossOrigin = 'anonymous'; /* other options for images*/ canvas.add(oImg); canvas.calcOffset(); });

[asturur]

are you using chrome?
are you trying on a real server or on localhost?

because with chrome i m blocked very often for "restricted urls" loading on my machine with windows.

so for local tests i use firefox and it works fine.

[abokamal]

Hi There
@asturur , we are using Chrome on live server.

It works perfectly in local host.

This is a critical issue when you are working on photo editing studio in multiple websites with one admin.

Your help in this is much appreciated....there are many questions about same issue in the net.

@kangax you have added this to fabrics https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a
https://github.com/kangax/fabric.js/issues/263

But it does not sound it is working

there is also few references @Kienz :+1:
http://stackoverflow.com/questions/20019268/png-image-color-doesnt-change-in-fabric-js
http://jsfiddle.net/Kienz/8RQYe/
http://jsfiddle.net/Kienz/wDfhf/
http://jsfiddle.net/93xje/3/

Looking forward for your help

[kangax]

/cc @Kienz

[Kienz]

@wajipk The difference is, that the crossOrigin in the first examlpe is set before the image is loaded. In the second the attributes is added after the image is loaded. The crossOrigin attribute have to be set before the image request started.

var img = document.createElement('img');
// have to be set before `src` attribute is set
img.crossOrigin = 'anonymous';

img.onload = function () {
  console.log('image loaded');
};
img.src = 'http://....';