CORS 已启用，但 toDataURL 仍会引发警告

Posted 2023-03-04

【中文标题】CORS 已启用，但 toDataURL 仍会引发警告

【英文标题】：CORS is enabled but toDataURL still throws a warning

【发布时间】：2014-02-13 06:43:03

【问题描述】：

正如标题所说，我已为所有图像启用了 CORS，但在尝试将它们放到画布上然后提取该画布（Chrome 和 FF）时，我仍然遇到错误。我在其中一张图片上运行了一个小嗅探器来测试它，它似乎实际上返回了正确的标题：

访问控制允许来源：*

我错过了什么吗？

【问题讨论】：

...您还在图像对象上指定 crossOrigin="anonymous" 属性？如果是这样，那不是问题，我们需要更多代码。

这解决了问题，@markE。谢谢你。我也在尝试使用 PaintbrushJS 为这些图像着色，但现在它给了我“跨源资源共享策略拒绝了跨源图像加载”。任何想法？编辑：似乎可能是因为我所有的图像都是通过 JS 动态加载的。

【参考方案1】：

您需要请求服务器使用CORS，只需将此属性添加到图像标签：

<img crossOrigin="anonymous" ... />

或从 javascript 动态地使用它作为属性（假设 img 已创建或获得）：

var img = new Image;
img.onload = callback;
img.crossOrigin = '';   /// = anonymous
img.src = '...';

如果您要加载多个图像，您可以使用支持跨域请求的图像加载器（例如我的YAIL loader，您可以请求使用 CORS 加载所有或单个图像）。