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

Posted 2023-05-08

【中文标题】svg 到 png 不工作，怀疑 svg 元素差异

【英文标题】：svg to png not working, suspect svg element differences

【发布时间】：2015-10-11 07:37:18

【问题描述】：

我无法弄清楚为什么两个不同的 svg 会导致我的 javascript 在一个实例中工作，而在另一个实例中却不行。我只换掉了两个示例中的 svg 元素，一个有效，一个无效。这是两个 jsFiddles 中的代码。我从here 得到的工作示例。

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

工作：JsFiddle

不工作：JsFiddle

这是 js，我无法添加 svg 代码，否则我会超出 *** 的字符数限制。

    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/canvas 转换，并尝试将 svg 的序列化字符串直接放置到富文本区域，但在 IE 中出现错误，非默认命名空间声明不得有一个空的 URI。行：1，第 142 列

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;

我还认为，如果我能更多地展示这个富文本区域当前的结构，那将会有所帮助。这不是我们做的，它是我们使用的产品，我只是想把地图粘贴到描述区域，这样它就可以与票一起使用。我们拥有的唯一访问权限是从表单中的规则触发的 js。 Screenshot of ze_body element as it stands in the DOM

【参考方案1】：

它来自你的命名空间声明：

改变 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。

【讨论】：

非常感谢，我看到人们在视频中一直在清理命名空间，但我用inkscape制作了这些svg，甚至保存它们进行了优化，它仍然有很多清理工作要做.看起来我还有更多的阅读要做，再次感谢。

你知道为什么你的 Jsfiddle 不能在 IE 中运行吗？我最初在 Chrome 中尝试过这个，但我也需要它在 IE 11 中工作。我在控制台中看不到任何错误，但 png img 绝对没有打印到屏幕上。

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

实际上您是否尝试过将显示 svg 的 <img> 而不是将其转换为 png？

您能否详细说明您的最后评论，我不确定我是否遵循。您的意思是在 img 标签内将 src 位置添加到 svg？