Question

我正在尝试使用带有以下代码的easeljs向我的画布添加本地jpg：

var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
stage.addChild(bitmap);

这会将图像放在画布上。然后我想在图像上添加一个onclick事件：

var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
bitmap.addEventListener("click", function(){
    alert("CLICKED");
});
stage.addChild(bitmap);

这会导致以下错误：

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

显然是跨源类型问题。我在画架文档中注意到以下内容：

Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using methods such as getObjectUnderPoint, or using filters, or caching. You can get around this by setting crossOrigin flags on your images before passing them to EaselJS, eg: img.crossOrigin="Anonymous";

我尝试了这个（按照http://developers.spilgames.com/wiki/Developer_Platform_-_Learning_center_-FAQ-_HTML5_API_CreateJS_cross-domain_error中的步骤）然后出现了两个错误：

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

由于我正在构建的项目是Cordova / Phonegap项目，需要能够脱机运行，因此无法从Web服务器获取图像，因为我可以看到图像必须来自文件：/ /。有没有人对如何解决这个问题有任何想法？

Answer 1

为防止交叉来源问题，Chrome会自动阻止此类图像。 您可以在Firefox 中运行它，而不会造成麻烦。

在为了在Chrome中测试这些，您必须在本地服务器中运行该文件，例如Apache tomcat。或者使用运行在服务器上的运行选项，如 Web风暴，如IDE。

如果您没有Web风暴设置Apache tomcat服务器并将项目文件夹复制到Apache tomcat / webapps文件夹中。现在启动tomcat服务器，键入http://localhost:8080/pathto your project folder in webapps.

即如果您的项目位于../tomcat7/webapps/myproject/game.html 输入http://localhost:8080/myproject/game.html

Answer 2

创建另一个Chrome快捷方式，并将--disable-web-security添加到/chrome.exe快捷方式链接。使用此链接重新启动chrome。

在easeljs中的file：//上加载本地位图

2 个答案: