Question

我正在尝试修复此示例中的跨域错误

^它使用旧版本的easiljs lib - 我试图通过更新lib开始 - 但随后它破坏了应用程序。

Answer 1

如果您要跨域加载图片，那么它们会污染您的画布。由于您只是将它们作为图像加载（标记加载），因此尽管它们位于不同的域中，它们至少可以加载和显示。

如果您使用的是XmlHttpRequests（或XHR，默认情况下PreloadJS使用它），那么它们将无法完全加载。在这种情况下，我们通常建议人们在PreloadJS LoadQueue中使用标签加载（如上所述@TheOldCountry）。

要将图像正确加载到EaselJS阶段，并与舞台交互（包括鼠标交互，过滤器等），您的图像必须包含跨源响应标头（有关CORS here的更多信息）。正确提供后，您必须在图片上设置crossOrigin属性：

var image = new Image();
image.crossOrigin = "Anonymous";
image.src = "http://etc.png";

如果没有crossOrigin属性，您将在画布中出现错误，如果没有服务器提供CORS标题，您将得到不同的错误，但结果相同。

请注意，PreloadJS也支持CORS，您可以使用CORS从服务器加载的任何项目传递crossOrigin标志：

loadQueue.loadFile({src:"http://server.com/image.png", crossOrigin:true});

Here is a quick fiddle我前段时间在EaselJS中展示了自定义过滤器，它使用支持CORS的测试服务器上的图像。

希望有所帮助。