如何在单个html页面中隐藏多个svg到png？

Question

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

​

代码如下: Svg实际上是由这些脚本在div venn2中创建的。

    <div id="venn2"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="js/venn.js"></script>
    <script>
    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;
    }
    </script>

我得到的脚本这里通过画布将svg转换为png。

    <canvas id="canvas" ></canvas>
    <div id="png-container" ></div>

    <script>
    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 = '<img src="'+png+'"/>';
        DOMURL.revokeObjectURL(png);    
    };
    img.src = url;
    </script>

所以，作为svg的venn图是由脚本1在venn2 div中创建的，然后由脚本2编写为png，它对于每页一个svg图像非常好。

当我在单个html页面上有多个这样的svg图时。只有第一个被转换为png。

但是我无法在位置2和3或更多的位置取下svg来转换为png。我被这个代码卡住了

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

其中' svg‘指的只是第一个svg，我猜不是以后。我甚至不能用不同的"id“创建svg，因为svg是由d3和venn.js脚本形成的。

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

Answer 1

如果其他人来找样例代码，我如下所示。

我的情况是:我有一个svg，它有两个层次。我只是得到了第一层类似的行动。实际上是用id=“图表”绘制成一个元素。已经用id="layer0“创建了一个新画布。

最后，我需要将其作为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);

  }

我感谢“生物发展公司”和“罗伯茨·朗森”的帮助。对我来说，最终的关键是确保在加载映像时调用toDataURL。干杯。