将文档中的 SVG 栅格化为 Canvas [英] Rasterizing an in-document SVG to Canvas

问题描述

为了正确回答

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

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

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

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

WhatWG规范声明图像从数据生成:在另一个文档或脚本中找到的URL"的来源应该与该文档相同.本次测试中的所有数据均来自同一个文档.

解决方案

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

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

此外，目前 Firefox 要求 svg 元素具有宽度和高度属性，以便呈现到画布.将来可能会取消此限制.

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

In order to answer this question properly I thought that I would:

1. Convert an in-document SVG file to a data URL
2. Load it into an <img>
3. Draw that <img> to a <canvas>
4. Convert that <canvas> to a PNG data URL
5. Load that data URL into an image.

I have an example of this attempt here:
http://phrogz.net/SVG/svg_to_png.xhtml

In Firefox I get (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] when attempting to draw the image to the canvas in step 3.

Why do I get this error in Firefox, or how do I work around it?

In Chrome I get a SECURITY_ERR exception when I try to call toDataURL() in step 4.

Why would I get this error in Chrome, or how do I work around it?

The WhatWG specs state that the origin for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document.

解决方案

In Firefox, SVG images taint the canvas but we're working on removing that restriction in https://bugzilla.mozilla.org/show_bug.cgi?id=672013 when that bug lands what you're trying to do should be possible. This restriction has been removed in FFv12.

All browsers implement similar restrictions and all are working on removing them; generally by making what you can do in SVG images more restricted. For instance we don't want to get back to the bad old days of being able to work out what sites you've visited by creating an SVG image with links in it and then reading off the colour of the links using canvas.

In addition at the moment firefox requires that the svg element have width and height attributes in order to render to canvas. This restriction may be removed in future.

Edit by Phrogz: as noted in my comment above, I received independent confirmation that the security issue in Chrome is the same issue: Chrome (currently) always taints a canvas when an SVG document is drawn to it.

这篇关于将文档中的 SVG 栅格化为 Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！