svg到PNG不工作，怀疑svg元素差异

我无法弄清楚为什么两个不同的svg会导致我的JavaScript在一个实例工作，但不在其他。在这两个例子中，我只换出了svg元素，其中一个是有效的，一个不是。这里是两个jsFiddles中的代码。我从here得到的工作例子。svg到PNG不工作，怀疑svg元素差异

最终，我的目标是保存平面图的当前svg元素，并将转换后的png作为内联img插入富文本区域中。就好像您截取了平面图的截图一样，并将其粘贴到您在帮助台网站中看到的丰富文本区域。我只是无法转换为PNG。

工作：JsFiddle

不工作：JsFiddle

这里是JS，我不能加入SVG代码，否则它将让我在＃1的字符限制。

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([svgString], { 
    type: "image/svg+xml;charset=utf-8" 
}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    var png = canvas.toDataURL("image/png"); 
    document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>'; 
    DOMURL.revokeObjectURL(png); 
}; 
img.src = url;

编辑：

因为我已经看中了这个代码省略PNG /帆布转换，并试图放置SVG的序列化的字符串，直接将富文本区域，但它会得到一个错误在IE中，非默认名称空间声明不能包含空的URI。线路：1，column142

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var img = new Image(); 

var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString); 
img.onload = function() { 

    document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>'; 

}; 
img.src = url;

此外，我认为这将有助于如果我表现出更多的这个富文本区域目前如何坐镇结构。这不是我们的做法，它是我们使用的产品，我只是试图让地图粘贴到描述区域，以便它可以与票证一起生活。只有我们拥有的访问权限是由表单中的规则触发的。 Screenshot of ze_body element as it stands in the DOM

来源

2015-07-21 Dogbyte

它出自您的命名空间声明：

变化xmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"

到xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">并should work。

还要注意，由于您使用的XMLSerializer().serializeToString()，你并不需要创建一个blob和objectURL，你只能通过data:image/svg+xml; charset=utf8, "和encodeURIComponent(svgString)作为图像的URL。（fiddle）。

ps：您可以阅读关于命名空间声明here。

来源

2015-07-22 07:04:58 Kaiido

非常感谢你们，我看到人们一直在视频中清理命名空间，但是我用这些视图制作了这些视图，甚至将它们保存在优化之中，但仍然留下了大量的清理工作。我有更多的阅读做，看起来像，再次感谢。 – Dogbyte

你知道为什么你的Jsfiddle不能在IE中工作吗？我原本在Chrome中试过，但我也需要这个在IE 11中工作。我不能在控制台中得到任何错误，但PNG img绝对不是打印到屏幕上。 – Dogbyte

是的，IE对这项任务非常有限。显然它不支持任何命名空间的声明......如果你全部删除它们，你可以画到canvas：http://jsfiddle.net/jdh0y4c2/9/。但是，它会污染画布，使其无法传递其'dataURL'或'imageData'（显然，IE开发人员认为svg可以包含脚本，因此画布CORS应该适用于绘制到画布中的任何svg图像。我不知道任何解决方法，除了一个问你的IE用户右键单击svg或画布，'保存图像为...'，但它不会在你的情况下有用... – Kaiido

svg到PNG不工作，怀疑svg元素差异

回答

相关问题