CODEWITHSUNDEEP
javascriptcanvascross-domaincreatejspreloadjs
Spock
Spock

Reputation: 3

How to avoid a tainted canvas when using createJS?

I see three places to indicate I want a crossOrigin image: using true for the third parameter (which the documentation says is deprecated) of createjs.LoadQueue, setting the loadItem.crossOrigin property (either assigning "Anonymous" or using LoadItem.set({ .. crossOrigin:true .. }), and the crossOrigin property (which always seems to be null) of an image returned by a LoadQueue getResult. I can find no combination of settings to avoid a tainted canvas. What is the trick?

Upvotes: 0

Views: 1067

Answers (1)

Lanny
Lanny

Reputation: 11294

From my tests, CORS works fine.

Here is a quick sample using 0.6.2 from the CDN.

var queue = new createjs.LoadQueue(false);
queue.on("complete", handleComplete);
queue.loadFile({src:"http://playpen.createjs.com/CORS/awesome.jpg", crossOrigin:true, id:"image"});
function handleComplete(event) {
    var img = queue.getResult("image");
    console.log(img.crossOrigin); // anonymous
}

You can see it working in this demo, where the image is added to a bitmap on stage, and then a click listener added:

http://jsfiddle.net/od727g2q/

Here is a variation using the (deprecated, but still functional) argument on LoadQueue constructor: http://jsfiddle.net/od727g2q/1/

Just for sanity, here is a version using the latest NEXT in GitHub: http://jsfiddle.net/od727g2q/2/

Cheers.

Upvotes: 0

Related Questions