Cross-origin image load denied by Cross-Origin Resource Sharing policy

[arcbox]

Hello,

 

I am using a CDN to deliver game assets to the page, and I have CORS enabled so getting these images to load cross-domain has been working fine.

 

However, I am drawing these images to a canvas, editing them, and then using canvas.toDataURL() to get the canvas back as an image. This all works fine, as CORS was enabled for any image drawn and therefore the canvas isn't dirty.

 

When I try to use the resulting URL to load an image in Phaser, I get the following error:

 

"Cross-origin image load denied by Cross-Origin Resource Sharing policy"

 

The url for the image looks something like data:image;base64aaGAsDFAHHAr... so it seems like it is just locally stored, which makes me confused as to how this is a cross-origin issue.

 

I am able to create a javascript Image object with the url as the source and add it to the page no problem, it is only when I try to load it in Phaser does it complain.

 

As for solutions, I am wondering if there is a way to load an image in Phaser from a javascript Image object instead of a URL? I ask because I can set the image.crossOrigin property which might solve the issue.

 

Any other solutions or experience with CORS and Phaser would also be helpful.

 

Thanks!

[jerome]

clues : http://www.html5gamedevs.com/topic/4167-crossorigin-issue-using-data-uris/

[arcbox]

Awesome, loading the image from the cache worked perfectly!

 

Thanks!

[rich]

You can set Loader.crossOrigin as well, which is applied to any images loaded via the loader.

[soumak77]

At what point is game.load available?  I'm trying to set the crossOrigin value right after I create the Phaser.Game instance, however, it is null at that point.

I've built a web development environment that can be used to create phaser games.  A bunch of games have already been published, so trying to modify their source to add this one line will be a pain.  My goal is to set the Loader.crossOrigin value outside of the game source code.  I have my application hooked up so it can be notified when the game is created, but as stated previously, game.load in unavailable right after creating the game.  Is there maybe a way I can force phaser to initialize the loader right after creating the game instance?

[soumak77]

Sometimes you just have to read the source code...

After looking into it, I noticed that Game.load is set inside Game.boot.  Trying to call Game.boot early resulted in an error "Phaser.Game - Cannot create Canvas or WebGL context, aborting.".  Digging more into the source code, I saw that Phaser.Game waits until the device is ready to call Game.boot.  Using the same logic, I set up an event handler using Phaser.Device.whenReady to set game.load.crossOrigin.  All assets are now loading!