0

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.

The Old County
  • 89
  • 13
  • 59
  • 129

1 Answers1

0

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.

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • http://jsfiddle.net/5e34mqhz/4/ - here is a new js fiddle of the example - you mean I should create a load que - an array of the files? – The Old County Jun 25 '15 at 23:36
  • I got this error when I applied the crossOrigin value - "Image from origin 'http://jsrun.it' 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://fiddle.jshell.net' is therefore not allowed access." – The Old County Jun 25 '15 at 23:41
  • still getting errors on the cors - I've set them in the header – The Old County Jun 26 '15 at 08:58
  • According to the console, the CORS header is not being sent properly. – Lanny Jun 27 '15 at 20:54