EaselJS sprite on(\"click) returns CORS error

问题:

First off, I am working on a local EaselJS/CreateJS project, only to test some sprite and mouse interaction.

I have added a simple sprite image to the stage, and I called it "enemy1":

//Create the enemy sprite and add it to the stage
var enemy_image = new Image();
enemy_image .src = "enemy_sprite.png";
var enemy1 = new createjs.Bitmap(enemy_image);

enemy1 .x = 0;
enemy1 .y = 0;

stage.addChild(enemy1);

Using this code, I want to show an alert every time the user clicks on it:

enemy1.on("click", function() 
{
     alert("Clicked!");
});

Instead I get a cross-domain error on each click, as shown below:

If the problem is that I am working local or related to cross-domain requests - why does the picture load (and show) just fine on the stage, and the errors only show just as I click on it?

回答1:

Canvas is perfectly happy to allow you to add cross origin data to it, but doing so (without CORS) will taint the canvas.

You get the error when you try to read data from the canvas while it is tainted.

Presumably the library you are using is trying to read the data as part of its code for determining what you clicked on.

回答2:

I ran into a similar issue when trying to use images hosted on the web. Here is the function I wrote based on that answer as a work around:

function loadImg(uri) {
  var image = document.createElement("img")
  image.crossOrigin = "Anonymous"
  image.src = uri 
  return image
}

Then do:

var enemy1 = new createjs.Bitmap(loadImg("http://example.com/enemy_sprite.png"))