EaselJS精灵（“点击”）返回CORS错误 [英] EaselJS sprite on("click) returns CORS error

问题描述

首先，我正在开发一个本地 EaselJS / CreateJS项目，只测试一些sprite和鼠标的交互。

添加了一个简单的sprite图像到舞台，我称之为enemy1：

  //创建敌人精灵并添加到阶段
 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！ b $ b}）; 
  

而是每次点击时出现跨网域错误，如下所示：

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

Canvas非常高兴地允许你添加跨原始数据到它，但这样做（没有CORS）会污染画布。

当您尝试从画布中读取数据时，您会遇到错误。

假设您正在使用的库正在尝试读取数据作为确定您点击的代码的一部分。

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?

解决方案

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.

这篇关于EaselJS精灵（“点击”）返回CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！