如何在单个html页面中将多个svg转换为png？

我使用d3和venn.js来创建这个维恩图。

代码在这里：Svg实际上是通过这些脚本在div venn2中创建的。

    var sets = [ {sets:["A"], size: 12, label: "A"}, {sets:["B"], size:12, label: "B"}, {sets: ["A", "B"], size: 4, label: "AB"} ]; var chart = venn.VennDiagram() .wrap(false) .fontSize("14px") .width(400) .height(400); function updateVenn(sets) { var div = d3.select("#venn2").datum(sets); var layout = chart(div), textCentres = layout.textCentres; div.selectAll(".label").style("fill", "white"); div.selectAll(".venn-circle path").style("fill-opacity", .6); return layout; }  

我在这里通过canvas将svg转换为png的脚本。

   
  var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); 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 = ''; DOMURL.revokeObjectURL(png); }; img.src = url;  

因此，作为svg的维恩图是由脚本1和svg在venn2 div中创建的，然后由脚本2写成png。它对于每页一个svg图像完全正常。
当我在单个html页面上有多个这样的svg venn图表时。 只有第一个转换为png。
但我无法获取位置2和3或更多的svg转换为png。 我坚持这个代码

 var svgString = new XMLSerializer().serializeToString(querySelectorAll('svg')); 

其中’svg’仅表示我猜的第一个svg但不是后来的。 我甚至无法创建具有不同“id”的svgs，因为svg由d3和venn.js脚本组成。

问题是：当我通过上面的代码不知道他们的png图像的id时，如何转换html页面中的所有svg图像？
我不知道如何解析整个字符串var svgString以将所有字符串转换为不同的png图像？

Answer 1

如果其他人来寻找示例代码，我想出来如下。

我的情况：我有一个svg有两层图形绘制。 我只是像OP一样获得了第一层。 Plotly绘制了一个id =“chart”的元素。 已使用id =“layer0”创建的新canvas。

最终我需要作为dataURL发回PHP：

  var nodes = document.getElementById("chart").querySelectorAll('svg'); for (var i = 0; i < nodes.length; i++) { result = new XMLSerializer().serializeToString(nodes[i]); eval('layer'+[i]+'chart').src = 'data:image/svg+xml;base64,' + btoa(result); } elem0 = document.getElementById("layer0"); ctx0 = elem0.getContext("2d"); layer0chart.onload = function() { ctx0.drawImage(layer0chart,0,0,w*1.5,h*1.5); ctx0.drawImage(layer1chart,0,0,w*1.5,h*1.5); canvasdata = elem0.toDataURL(); console.log(canvasdata); } 

我很感谢@BioDeveloper和@RobertLongson的帮助。 对我来说最关键的关键是确保在加载图像时调用toDataURL。 干杯。