Javascript 将文档中的SVG栅格化为画布

为了正确回答，我想我会：

将文档中的SVG文件转换为数据URL

将其加载到

将该

绘制到

将该

转换为PNG数据URL

将该数据URL加载到图像中

我这里有一个尝试的例子：

在Firefox中，在第3步尝试将图像绘制到画布时，我得到了

（NS\u错误\u不可用）[nsIDOMCanvasRenderingContext2D.drawImage]

为什么在Firefox中会出现此错误，或者如何解决此错误？

在Chrome中，当我在步骤4中尝试调用

toDataURL（）

时，会出现

SECURITY\u ERR

异常

为什么我会在Chrome中出现此错误，或者如何解决它？

---

“从另一个文档或脚本中找到的数据：URL生成的”图像的来源应与该文档相同的状态。本测试中的所有数据都来自同一个文档。

在Firefox中，SVG图像会污染画布，但我们正在努力消除该缺陷出现时的限制，您尝试执行的操作应该是可能的此限制已在FFv12中删除。

所有浏览器都实现了类似的限制，并且都在努力消除这些限制；通常，通过对SVG图像中的操作进行更严格的限制。例如，我们不想回到过去糟糕的日子，通过创建包含链接的SVG图像，然后使用画布读取链接的颜色，来确定您访问了哪些站点

此外，目前firefox要求svg元素具有宽度和高度属性，以便渲染到画布。这一限制将来可能会取消

---

Phrogz编辑：正如我在上面的评论中所指出的，我收到了独立的确认，Chrome中的安全问题是同一个问题：当绘制SVG文档时，Chrome（当前）总是污染画布。

如果使用SVG文件，您是否会收到同样的错误（Chrome中）？有可能是经过多次复制，Chrome不再确定其来源？@BrianNickel问得好。奇怪的是，是的。如果我将最后一行更改为

svgImg.src=“smiley.svg”

，那么它仍然会抛出错误，尽管从同一域加载了一个图像。这需要进一步调查；可能SVG数据URL是一个转移视线的问题。我认为SVG就是问题所在：。如果您绘制画布本身的数据URL，它在Chrome上工作，但SVG的数据URL不工作。@pimvdb您是对的；IRC上的一位“Chrome工程师”刚刚确认，将任何SVG绘制到画布当前都会污染画布，而不管SVG的来源如何。由于围绕SVG/

foreignObject

的硬安全问题，这被称为“平底船”。（在Firefox问题解决之前，不要将此作为答案发布。）另请参见workaround@RobertLongson我希望你是正确的，另一位关于Bugzilla的评论也同意你的观点；但是，请注意，您提到的bug谈到在画布上绘制SVG时会污染画布，而Firefox中的错误发生在调用

drawImage（）

期间。SVG内容甚至从未到达

。元素需要宽度和高度属性才能绘制到画布。从理论上讲，我们应该能够使用viewBox bug，它似乎是关于如何做到这一点的。@RobertLongson-你知道这个相关问题的任何解决方案吗？