EaselJs - cross-domain images workaround? -

when try use:

temp = new createjs.bitmap(obj.path) 

i error:

uncaught error has occurred. due security restrictions on reading canvas pixel data local or cross-domain images. 

this related this question. except in above case user isn't using web-server.

in case i'm using web-server need images hosted on aws s3 bucket using https.

is there setting can use allow cors easeljs?

cors settings on s3 bucket:

<corsconfiguration>     <corsrule>         <allowedorigin>*</allowedorigin>         <allowedmethod>get</allowedmethod>         <maxageseconds>3000</maxageseconds>         <allowedheader>authorization</allowedheader>     </corsrule> </corsconfiguration> 

edit: related question

bitmap not handle cors, since must define cross-origin property on image directly before setting src.

the best way create image yourself, , apply cross-origin, before passing bitmap.

var image = document.createelement("img"); image.crossorigin = "anonymous"; // should work fine image.src = obj.path; temp = new bitmap(image); 

there no api on easeljs pass-through crossorigin, way.

if preload easeljs content preloadjs, can pass crossorigin property on queue, or load item.

var queue = new createjs.loadqueue(false, null, true); //3rd param queue.loadfile("path/to/bmp.png"); // use queue cors queue.loadfile({src:"path/to/bmp.png", crossorigin:true, id:"image"}); // 1 file (you can leave out param on loadqueue) // later var bmp = new createjs.bitmap(queue.getresult("image"); 

note reason cors errors if image displays easeljs uses pixel fill determine hit testing. can around putting hitareas on images, used instead of image pixels when doing hit testing:

var temp = new bitmap(obj.path); temp.image.onload = function() {     var s = temp.hitarea = new createjs.shape();     s.graphics.fill("red").drawrect(0,0,temp.image.width,temp.image.height); } 

cheers,