canvas.toDataURL()引发安全错误

Question

我正在使用HTML5画布和.toDataURL()函数，通过 KineticJS的 .toDataURL()方法。画布使用用户上传到网站的图像，这些图像存储在不同的机器和子域farm1.domain.com上。 问题: 当调用.toDataURL()时，我会收到错误提示。

SECURITY_ERR: DOM Exception 18 

有没有什么解决方法？如果用户通过 domain.com 访问页面，而图像托管在 www.domain.com 上，我也会遇到同样的问题。

尝试：

我在虚拟主机中的 httpd.conf 中添加了以下行，并重新启动了 Apache 服务。

Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"

当我从domain.com的页面访问托管在www.domain.com上的图像时，仍然会出现相同的错误！在KineticJS中有没有解决这个问题的方法？

- Nyxynyx

---

可能是重复的问题：https://dev59.com/eGDVa4cB1Zd3GeqPe5da?rq=1 和 https://dev59.com/1HE95IYBdhLWcg3wQ7mb - Matt Greer

重复问题已经得到回答，请查看右侧的相关问题，并在此处查看规范。 - antejan

我猜想，为了避免错误，origin-clean标志必须设置为true。在KineticJS中能实现这个吗？ - Nyxynyx

这在Chrome 45中似乎可以工作，但我在Safari 9中遇到了问题。 - dviramontes

Answer 1

您需要将Access-Control-Allow-Origin头部添加到您正在加载的图像中，而不是加载它们的页面。关于此标头以及CORS的详细信息，您可能希望阅读“CORS不仅适用于XHR”，该文章专门讨论了这个问题。

- user149341

Answer 2

这个错误是无法避免的。从不同域加载到画布中的图像将引发此错误，因为目前每个浏览器都是这样实现的。在您的情况下，图像应该存储在同一个域中，这样就不会出现异常。

- Konstantin Dinev

---

很奇怪，当图片数量无法放在单个服务器上时，我不能将我的图片存储在其他服务器和CDN上。 - Nyxynyx

@Nyxynyx 是的，不幸的是这是 canvas 元素的安全限制。 - Konstantin Dinev