仅 Safari 中的 Canvas CORS 安全错误

【问题标题】：Canvas CORS security error in Safari only仅 Safari 中的 Canvas CORS 安全错误
【发布时间】：2016-08-04 10:13:52
【问题描述】：

如何在 safari 中将 dataURL format('"data:image/svg+xml;base64,"' ) svg 设置为 img.src？（在 chrome 中可以。）。

Safari 会抛出 securityError。有什么方法可以使 dataURL 的域正确吗？

var img = new Image();
img.onload = myLoader;
img.crossOrigin = 'anonymous';       
img.src = "data:image/svg+xml;base64,...............";
var canvas = document.createElement('CANVAS');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
console.log(canvas.toDataURL());

【问题讨论】：

标签： javascript safari cors

【解决方案1】：

这可能是因为您的 SVG 文档中有一个 <foreignObject> 元素。

出于安全原因，当在画布上绘制此元素时，Safari v.9+ 会污染画布。

除了从 SVG 中删除之外没有其他解决方法 ;-)

Ps：Edge 之前的 IE 也会污染画布，一旦绘制了任何 svg。

【讨论】：

是的，svg 中有一个元素。我只想将 dom 转换为 svg，然后再转换为 png 文件。
好吧，你不能这样做，不是在 Safari 中，也不是在 Edge 之前的 IE 中，而且无论如何只能在其他浏览器中受到可怕的限制。那是一个 hack，如果你正在阅读 MDN 文章中关于它的文章，那应该从那里删除。要实现您想要的，请使用会实际绘制您的元素的库，例如 html2canvas