使用 createJS 时如何避免画布被污染？答案

【问题标题】：How to avoid a tainted canvas when using createJS?使用 createJS 时如何避免画布被污染？
【发布时间】：2017-01-16 18:58:56
【问题描述】：

我看到三个地方表明我想要一个 crossOrigin 图像：对 createjs.LoadQueue 的第三个参数（文档说已弃用）使用 true，设置 loadItem.crossOrigin 属性（分配“匿名”或使用 LoadItem. set({ .. crossOrigin:true .. }) 和由 LoadQueue getResult 返回的图像的 crossOrigin 属性（似乎总是为空）。我找不到任何设置组合来避免画布被污染。什么是诡计？

【问题讨论】：

除非您从自己的域加载图像，否则您无法从客户端进行控制。
我正在从支持 CORS 的源加载。

标签： javascript canvas cross-domain createjs preloadjs

【解决方案1】：

根据我的测试，CORS 工作正常。

这是使用来自 CDN 的 0.6.2 的快速示例。

var queue = new createjs.LoadQueue(false);
queue.on("complete", handleComplete);
queue.loadFile({src:"http://playpen.createjs.com/CORS/awesome.jpg", crossOrigin:true, id:"image"});
function handleComplete(event) {
    var img = queue.getResult("image");
    console.log(img.crossOrigin); // anonymous
}

您可以在这个演示中看到它的工作原理，其中图像被添加到舞台上的位图中，然后添加了一个点击侦听器：

http://jsfiddle.net/od727g2q/

这是在 LoadQueue 构造函数上使用（已弃用，但仍然有效）参数的变体：http://jsfiddle.net/od727g2q/1/

为了理智，这里是使用 GitHub 中最新 NEXT 的版本：http://jsfiddle.net/od727g2q/2/

干杯。

【讨论】：

我尝试在我的桌面上改编你的 jsfiddle 代码。（我在标题中添加了：
我的评论（上图）已被自动编辑以删除路径前面的“https://”（以防万一知道这一点很重要）。我把那个脚本标签放在头部（不是头部）。另外：谢谢你的例子。
你能在你的服务器上发布一个资产的链接吗？也许 CORS 没有按您的预期运行。
不确定您在寻找什么。我复制了 jsfiddle 代码，所以它使用相同的资产（playpen.createjs.com/CORS 上的 awesome.jpg）。
我使用了来自 jsfiddle 的 NEXT 构建的链接，是的，它有效。哇。终于解脱了。感谢您跟踪错误。谜团解开了！