EaselJS sprite on("click) returns CORS 错误

Question

首先，我正在做一个 local EaselJS/CreateJS 项目，只是为了测试一些精灵和鼠标的交互。

我在舞台上添加了一个简单的精灵图像，我称之为"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);

使用这段代码，我想在用户每次点击它时显示一个警告：

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

相反，我在每次点击时都会收到跨域错误，如下所示：

如果问题是我在本地工作或与跨域请求有关 - 为什么图片在舞台上加载（和显示）很好，并且出现错误只在我点击时显示？

Answer 1

Canvas 非常乐意允许您向其添加跨源数据，但这样做（没有 CORS）会污染 canvas.

当您尝试从 canvas 被污染的数据中读取数据时出现错误。

大概您正在使用的库正在尝试读取数据作为其代码的一部分以确定您点击了什么。

Answer 2

我在尝试使用网络上托管的图片时运行变成了。这是我根据该答案编写的函数作为解决方法：

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

然后做：

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

EaselJS sprite on("click) returns CORS 错误

EaselJS sprite on("click) returns CORS error

html

javascript

cross-domain

easeljs

createjs