javascriptcanvascross-domaincreatejspreloadjs

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?


Solution

  • 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.