Question

我正在从HTML文本内容创建动态生成的SVG。它在Chrome中运行良好，但是当SVG数据转换为PNG以供下载时，Safari始终会出错。

令我困惑的是，没有发生跨浏览器的事情;这都是从单一来源生成/下载的。即便如此，包括img.crossOrigin = ‘Anonymous’在内的Safari还没有帮助Safari克服（大概）画布的origin-clean州的问题。

function makeImage(canvas, pHeight, content) {

var ctx = canvas.getContext('2d');
var svgElementCode = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">' + 
    '<foreignObject width="100%" height="100%">' + 
    '<div xmlns="http://www.w3.org/1999/xhtml" style="height:' + (pHeight - 100) + 'px; font-size: 20px;">' + 
    content +  
    '</div>' + 
    '</foreignObject>' + 
    '</svg>';

var data = 'data:image/svg+xml,' + encodeURIComponent(svgElementCode);
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = data;

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var canvasdata = canvas.toDataURL("image/png");
    var pngimg = '<img src="'+canvasdata+'">';
    $("#shareImage").append($('<a href="' + canvasdata + '" title="file.svg">' + pngimg + '</a>'));      
    };

}

我不知道其他浏览器中可能存在哪些canvas / SVG恐怖，但是现在我只是想在Safari中看到它。有什么想法吗？

更新

似乎使用foreignObject标记无法将SVG写入画布，但此标记可能对Safari的安全异常（脏画布）负有部分责任。一旦Safari遇到canvas.toDataURL，就会抛出安全错误。实际上，即使是svg-todataurl.js插件 - 显然写得很好 - 也无法在Safari中克服同样的基本问题。

有趣的是，这个问题也发生在IE的所有版本中，直到Edge（非IE无论如何？）;在Edge中canvas.toDataURL函数有效。 HMM。

更新2

@Kaiido的建议：使用html2canvas。如果您没有做任何跨源的东西，那么这就是将DOM元素渲染为像素所需的全部内容。谢谢Kaiido。

更新3

html2canvas：NEGATORY。尝试使用Safari下载测试图像generated on their examples page。同样的问题，所以不是解决方案。

来自canvas.toDataURL的SVG＆gt; PNG在Safari 9.x中引发DOM异常18安全性错误

0 个答案: