在 Canvas 上从 SVG 导出 PNG

Question

这是一个有点复杂的问题：

我的目标是采用 HTML，并将其导出为 PNG。我读到最好的方法是将 HTML 包装在 SVG 和 foreignObject 元素中，然后将其绘制在 HTML5 Canvas 上。问题是，当我这样做时，我发现由于 tainted canvas cannot be exported 错误消息而无法导出。这是我的代码：

var data = "<svg width=200 height=200>" +
            "<foreignObject width=100% height=100%>" +
            document.getElementById("textbox").innerHTML +
            "</foreignObject>" +
            "</svg>";

var serialized = new XMLSerializer().serializeToString(data.toDOM());

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    window.open(canvas.toDataURL("image/png")); //this is the line with the error
}

img.src = url;

我已验证其中大部分都有效，但 canvas.toDataURL() 调用除外。我在这里错过了什么吗？有没有办法让我忽略这个工作？谢谢...

Answer 1

是的，SVG 污染了现代浏览器中的 canvas。

您不能再使用 foreignObject hack 来抓取 html 元素。

出于非常好的安全原因，现代浏览器已经填补了这个漏洞。

没有跨浏览器的替代方案 -- 同样出于非常好的安全原因。

Chrome 有一个名为 ScreenShot 的插件，可让您抓取内容。

在 Canvas 上从 SVG 导出 PNG

Export PNG from SVG on a Canvas

html

javascript

svg

canvas