Load a local bitmap over file:// in easeljs - google-chrome

Question

I'm trying to add a local jpg to my canvas using easeljs with the following code:
var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
stage.addChild(bitmap);
This puts the image on the canvas. I then want to add an onclick event to the image:
var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
bitmap.addEventListener("click", function(){
alert("CLICKED");
});
stage.addChild(bitmap);
This causes the following error:
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
Obviously a cross origin type issue. I noticed the following in the easeljs docs:
Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using methods such as getObjectUnderPoint, or using filters, or caching. You can get around this by setting crossOrigin flags on your images before passing them to EaselJS, eg: img.crossOrigin="Anonymous";
I tried this (following the steps here http://developers.spilgames.com/wiki/Developer_Platform_-_Learning_center_-FAQ-_HTML5_API_CreateJS_cross-domain_error) and then got two errors:
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.
Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
As the project I'm building is a Cordova/Phonegap project which needs to be able to run offline, getting the images from a web server is not possible, as far as I can see the images must come over file://. Does anybody have any ideas of how I can get around this issue?

Answer 1

To prevent cross origin issues Chrome automatically blocks such images. You can run it in Firefox without causing the trouble.
In order to test these in chrome you have to run the file in local server like Apache tomcat.
Or use the running options run on server from Web storm like IDE.
If you don't have Web storm set up Apache tomcat server and copy your project folder in Apache tomcat/webapps folder. Now start the tomcat server, type http://localhost:8080/pathto your project folder in webapps.
ie if your project is in ../tomcat7/webapps/myproject/game.html
type http://localhost:8080/myproject/game.html

Answer 2

Create a another Chrome shortcut and add --disable-web-security to the /chrome.exe schortcut link. Restart chrome using this link.