Javascript 使用toDataUrl（）从画布保存图像-污染画布错误解决方法？

我目前正在构建一个功能，用户可以上传视频，然后选择缩略图。它是基于这把小提琴：

保存画布数据的代码-从

toDataUrl（）

-开始，在正常情况下工作。已经对其进行了测试。我可以通过AJAX获取图像数据并将其发布到我的操作页面

但是我得到了一个关于画布被污染的经典错误。大概是这样的：

未捕获的安全性错误：未能在上执行“toDataURL” “HtmlCanvaElement”：可能无法导出受污染的画布

那是因为我的视频来自不同的领域。我使用CDN

我在

http://example.com

并从

http://videos.example.com

-因此该代码在此特定实例中不起作用

我知道，使用javascript，我必须在源材料上设置一个名为

crossOrigin=“Anonymous”

的属性，无论是视频本身还是画布。这个问题有上百万种变体。我都看过了，但我还是不知道我在做什么

有人能举一个例子说明

toDataUrl（）

在这种情况下起作用吗

---

提前感谢。

crossOrigin='anonymous'

（注意小写的

a

）仅在承载视频文件的服务器支持CORS@PatrickRoberts，您完全正确，但需要注意的是：如果

crossorigin

属性设置为

“使用凭据”

以外的任何其他值，它将默认为

“anonymous”

，因此

“anonymous”

的工作原理与

“anonymous”

或

“foo”

（甚至

“false”

）完全相同。问题不在这里，但从服务器配置中可以明显看出。如果用户“上传”视频，为什么要使用您在cdn上托管的视频？你不记得了吗？这样就不会出现跨源问题，用户也不必再次下载计算机上的内容。。。关于cdn的配置，请阅读他们的手册，手册中当然解释了如何配置跨源请求，但这取决于每项服务。@Kaido我很感激这个提示，我只是在@PatrickRoberts后面，是的，只是强调了本页第一部分的最后一句话：“无效的关键字和空字符串将作为

匿名

关键字处理。”。有些人可能认为

“false”

或

“

会将其设置为无CORS，但事实并非如此。