将文档内的SVG转换为画布（Canvas）上的光栅图像

Question

为了正确回答这个问题，我想要：

1. 将文档内的SVG文件转换为data URL
2. 将其加载到<img>中
3. 将该<img>绘制到<canvas>中
4. 将该<canvas>转换为PNG数据URL
5. 将该数据URL加载到一个图像中。

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

在Firefox中，在第3步尝试将图像绘制到画布上时，我会得到(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]的错误信息。

为什么我会在Firefox中遇到这个错误，或者如何解决它？

在Chrome中，在第4步尝试调用toDataURL()时，我会得到一个SECURITY_ERR异常。

为什么我会在Chrome中遇到这个错误，或者如何解决它？

WhatWG规范指出，来自另一文档或脚本中的data:URL生成的图像应该与该文档具有相同的原点。这个测试中的所有数据都来自同一个文档。

- Phrogz

---

如果您使用SVG文件，是否在Chrome中遇到了相同的错误？这可能是因为经过多层复制后，Chrome不再确定其来源。 - Brian Nickel

你说得对；IRC上的一位“Chrome工程师”已经确认，当前将任何SVG绘制到Canvas上都会污染该画布，而与SVG起源无关。这被描述为一个“权宜之计”，因为涉及SVG/foreignObject周围的严格安全问题。（在解决Firefox问题之前不会将此发布为答案。） - Phrogz

你的示例 http://phrogz.net/SVG/svg_to_png.xhtml 在IOS上无法工作，因为<img>中的PNG数据URL无法工作。你有解决方法吗？ - Michael

@confile为什么不直接把它留在<canvas>上，因为那样可以正常工作？（这个问题有自己的问题。） - Phrogz

@Phrogz 因为我想要导出并分享到其他网络。 - Michael

Answer 1

在Firefox中，SVG图像会污染画布，但我们正在努力取消此限制。当这个问题被解决后，您要做的事情将成为可能。FFv12中已经删除了此限制。

所有浏览器都实施类似的限制，并且都在努力消除它们；通常通过限制您可以在SVG图像中进行的操作来实现。例如，我们不希望回到旧日的恶性操作，即通过创建带有链接的SVG图像，然后使用画布读取链接颜色来确定您访问过的网站。

此外，目前Firefox要求svg元素具有宽度和高度属性才能呈现到画布上。这种限制可能会在将来被取消。

由Phrogz编辑：如我在上面的评论中注明的那样，我收到了独立的确认，即Chrome中的安全问题是相同的问题：当SVG文档绘制到画布时，Chrome（当前）总是污染画布。

- Robert Longson

---

@RobertLongson 我抱有希望，认为你说得对，Bugzilla上的另一位评论者也同意你的看法。但请注意，你提到的错误是在将SVG绘制到画布时污染画布，而Firefox中的错误是发生在调用drawImage()时。SVG内容甚至从未传递到<canvas>。 - Phrogz

<svg>元素需要width和height属性才能被绘制到画布上。理论上，我们应该能够使用viewBox bug https://bugzilla.mozilla.org/show_bug.cgi?id=700533 来解决这个问题。 - Robert Longson

@RobertLongson - 你知道这个相关问题的解决方案吗？http://stackoverflow.com/questions/10329131/firefox-rasterizes-svg-to-canvas-before-resizing-instead-of-after-see-jsfiddle - Jake