EaselJs - cross-domain images workaround?

Question

When I try to use:

temp = new createjs.Bitmap(obj.path)

I get 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.

This is somewhat related to this question. Except in the above case user isn't using a web-server.

In my case I'm using a web-server but I need the images to be hosted on an AWS S3 bucket using https.

Is there a setting that I can use to allow CORS with EaselJs?

CORS Settings on S3 Bucket:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Edit: related question

Answer 1

Bitmap does not handle CORS, since you must define a cross-origin property on your image directly before setting the src.

The best way to do this is to create the image yourself, and then apply cross-origin, before passing it to Bitmap.

var image = document.createElement("img");
image.crossOrigin = "Anonymous"; // Should work fine
image.src = obj.path;
temp = new Bitmap(image);

There is currently no API on EaselJS to pass-through the crossOrigin, so this is the only way.

If you preload your EaselJS content with PreloadJS, you can pass the crossOrigin property on the queue, or any load item.

var queue = new createjs.LoadQueue(false, null, true); //3rd param
queue.loadFile("path/to/bmp.png"); // Will use the queue CORS
queue.loadFile({src:"path/to/bmp.png", crossOrigin:true, id:"image"}); // For one file only (you can leave out the param on LoadQueue)
// later
var bmp = new createjs.Bitmap(queue.getResult("image");

Note that the reason you get CORS errors even if the image displays is that EaselJS uses pixel fill to determine hit testing. You can also get around this by putting hitAreas on your images, which are used instead of the 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,

Answer 2

Yes, Enable CORS on your AWS S3 bucket under Permissions.