Fixing cross domain issues on a 360 canvas createjs gallery

Question

I am trying to fix the cross domain errors on this example

http://cssdeck.com/labs/ze8jtaqe

^ its using an old version of the easiljs lib - I tried to start by updating the lib - but then it breaks the application.

Answer 1

If you are loading images cross-domain, then they will taint your canvas. Since you are loading them just as images (tag loading), they can at least be loaded and displayed despite being on different domains.

If you were using XmlHttpRequests (or XHR, which PreloadJS uses by default), then they would fail to load entirely. In this case we usually recommend people use tag loading in the PreloadJS LoadQueue (as @TheOldCountry said above).

To properly load images into an EaselJS stage, and interact with the stage (including mouse interactions, filters, etc), your image must include a cross-origin response header (more info on CORS here). Once it is properly served, you must set the crossOrigin property on the image:

var image = new Image();
image.crossOrigin = "Anonymous";
image.src = "http://etc.png";

Without the crossOrigin property, you will get errors in the canvas, and without the server providing the CORS header, you will get a different error, but the same result.

Note that PreloadJS supports CORS as well, you can pass a crossOrigin flag with any item that is loaded from a server with CORS:

loadQueue.loadFile({src:"http://server.com/image.png", crossOrigin:true});

Here is a quick fiddle I made some time ago to show custom Filters in EaselJS that uses an image on a test server that supports CORS.

Hope that helps.