Question

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

代码在这里：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>

脚本我here通过画布将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的维恩图是由脚本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脚本组成。

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

Answer 1

万一有人来寻找示例代码，我将其找出如下。

我的情况：我有一个svg，其中有两层是由plotly绘制的。我只是得到像OP这样的第一层。密谋加入了一个id =“ chart”的元素。已经使用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);

  }

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

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

1 个答案: