将文档内 SVG 光栅化为 Canvas答案

【问题标题】：Rasterizing an in-document SVG to Canvas将文档内 SVG 光栅化为 Canvas
【发布时间】：2011-12-30 19:03:19
【问题描述】：

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

我在这里有一个这种尝试的例子：
http://phrogz.net/SVG/svg_to_png.xhtml

在 Firefox 中，我在第 3 步中尝试将图像绘制到画布上时收到 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]。

为什么我会在 Firefox 中收到此错误，或者我该如何解决？

在 Chrome 中，当我尝试在第 4 步中调用 toDataURL() 时，出现 SECURITY_ERR 异常。

为什么我会在 Chrome 中收到此错误，或者我该如何解决？

WhatWG specs 声明“从数据生成：在另一个文档或脚本中找到的 URL”的图像的来源来源应该与该文档相同。本次测试中的所有数据均来自同一个文档。

【问题讨论】：

如果您使用 SVG 文件，是否会遇到同样的错误（在 Chrome 中）？有可能经过这么多级别的复制，Chrome 已经无法确定来源了？
@BrianNickel 好问题。奇怪的是，是的。如果我将最后一行更改为svgImg.src = "smiley.svg"，那么尽管从同一域加载图像，它仍然会引发错误。这值得进一步调查；也许 SVG 数据 URL 是一个红鲱鱼。
我认为 svg 是问题所在：jsfiddle.net/eGjak/212。如果你绘制画布本身的数据 URL，它可以在 Chrome 上工作，但 SVG 的数据 URL 不能。
@pimvdb 你是对的； IRC 上的“Chrome 工程师”刚刚证实，将任何 SVG 绘制到 Canvas 当前会污染画布，无论 SVG 来源如何。由于围绕 SVG/foreignObject 的严重安全问题，这被描述为“平局”。（在解决 Firefox 问题之前，不要将此作为答案发布。）
另请参阅stackoverflow.com/questions/3975499 了解解决方法

【解决方案1】：

在 Firefox 中，SVG 图像会污染画布，但我们正在努力消除 https://bugzilla.mozilla.org/show_bug.cgi?id=672013 中的限制，当该错误出现时，您尝试做的事情应该是可能的。 此限制已在 FFv12 中移除。

所有浏览器都实施了类似的限制，并且都在努力消除它们；通常通过使您可以在 SVG 图像中执行的操作受到更多限制。例如，我们不想回到糟糕的过去，即通过创建带有链接的 SVG 图像，然后使用画布读取链接的颜色来确定您访问过哪些网站。

此外，目前 firefox 要求 svg 元素具有 width 和 height 属性才能渲染到画布上。将来可能会取消此限制。

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

【讨论】：

@RobertLongson 我希望你是正确的，Bugzilla 上的另一位评论者同意你的观点；但是，请注意，您提到的错误涉及在向其绘制 SVG 时污染画布，而 Firefox 中的错误发生在在调用drawImage() 期间。 SVG 内容甚至从未出现在 <canvas>。
@RobertLongson - 你知道这个相关问题的任何解决方案吗？ stackoverflow.com/questions/10329131/…