将文档内SVG栅格化为Canvas

Question

为了正确回答这个问题,我想我会:

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

我在这里有一个例子:http:
//phrogz.net/SVG/svg_to_png.xhtml

在Firefox中,我(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]尝试在步骤3中将图像绘制到画布时得到.

为什么我在Firefox中出现此错误,或者我该如何解决它？

在Chrome中,SECURITY_ERR当我尝试toDataURL()在第4步中调用时,我收到异常.

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

所述WHATWG规范指出的原点为"从一个数据中产生:在另一文献或在脚本中找到URL"的图象应是相同的文件.此测试中的所有数据均来自同一文档.

Answer 1

在Firefox中,SVG图像会污染画布,但我们正在努力在https://bugzilla.mozilla.org/show_bug.cgi?id=672013中删除该限制,当这个bug落到你想要做的事情时应该是可能的.FFv12中已删除此限制.

所有浏览器都实现了类似的限制,并且都在努力删除它们 通常通过使您在SVG图像中可以做的事情更受限制.例如,我们不想回到过去的糟糕时期,通过创建带有链接的SVG图像,然后使用画布读取链接的颜色,能够计算出您访问过的网站.

此外,目前firefox要求svg元素具有width和height属性以便渲染到画布.将来可能会删除此限制.

由Phrogz编辑:正如我在上面的评论中所指出的,我收到了独立确认,即Chrome中的安全问题是同一个问题:Chrome(当前)在绘制SVG文档时总是污染画布.