在easeljs中通过file：//加载本地位图

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.

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

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 一样在 本地服务器 中运行文件。 或者使用 Webstorm 像 IDE 一样在服务器上运行的运行选项。

如果您没有 Web Storm 设置 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 schortcut 链接。使用此链接重新启动 chrome。