这是一个复杂的问题:
我的目标是获取 HTML,并将其导出为 PNG。我读到,执行此操作的最佳方法是将 HTML 包装在 SVG 和foreignObject 元素中,然后将其绘制在 HTML5 Canvas 上。问题是,当我这样做时,我发现由于无法导出受污染的 Canvas
错误消息而无法导出。这是我的代码:
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()
调用除外。我在这里错过了什么吗?有没有办法让它发挥作用,我忽略了?谢谢...
最佳答案
是的,SVG 污染了现代浏览器中的 Canvas 。
您不能再使用 foreignObject
hack 来抓取 html 元素。
出于非常好的安全原因,现代浏览器已经堵塞了这个漏洞。
没有跨浏览器的替代方案——同样出于非常好的安全原因。
Chrome 有一个名为 ScreenShot 的插件,可让您抓取内容。
关于javascript - 从 Canvas 上的 SVG 导出 PNG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29350172/