Question

我一直在寻找这个问题的答案，我有svg形式的D3Js图表.svg有圆圈，文字，线条，图像的属性（以.png格式）。我可以下载D3Js图表作为.png文件，但我无法从图表中获取图像！.i已查看html2canvas但它不支持svg格式。

HTML

 <button id="save" class="btn btn-primary " 
    style="margin-left: 5%;width: 10%;height: 70%;margin-top: 0%;"  ng-click="">
            Save as Image
 </button>

<div style="text-align:center;">
    <org-chart dataobj="vm.company" ng-if="vm.company"></org-chart>
    <canvas width="1000" height="800" style="display: none;"></canvas>
    <!-- <div id="svgdataurl" style="display: none;"></div> -->
</div>

JS档案

d3.select("#save").on("click", function () {

    var html = d3.select("svg")
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
    var img = '<img src="' + imgsrc + '">';

    var canvas = document.querySelector("canvas"),
        context = canvas.getContext("2d");


    var image = new Image;
    image.src = imgsrc;

    image.onload = function () {
        context.drawImage(image, 0, 0);
        var canvasdata = canvas.toDataURL("image/svg");
        var a = document.createElement("a");
        a.download = "sample.png";
        a.href = canvasdata;
        a.click();
    };
});

示例D3代码构建图像

node.append("image")
    .attr("class", "circleClass")
    .attr("xlink:href", function (d) {
        return d.photo;
    })
    .attr("x", function (d) {
        if (d.group === "Focus") {
            return -40;
        } else {
            return -25;
        }
    })
    .attr("y", function (d) {
        if (d.group === 'Focus') {
            return -40;
        } else {
            return -25;
        }
    })
    .attr("height", function (d) {
        if (d.group === "Focus") {
            return 80;
        } else {
            return 50;
        }
    })
    .attr("width", function (d) {
        if (d.group === "Focus") {
            return 80;
        } else {
            return 50;
        }
    });

我有点在这里上限，我真的很感激一些帮助，代码示例会很棒谢谢

Answer 1

所以，在试图解决这个问题几周之后，想出了解决方案 1.如果有跨域或外部源（在这种情况下，我的图像来自AmazonS3）。

1.1。将整个svg转换为String，我使用xmlSerialize将svg转换为字符串（svg是xml数据）
1.2。 api调用后端结束 1.3。接收字符串，使用Apache Batik库（我们的backEnd在Java SpringBoot中）并将字符串转换为.png / .pdf。

我尝试过使用canvg，这很好但是它将svg转换为画布并且污染了画布，因为它中存在外部资源，（请让我们知道，如果有任何改变的话，我无法和但是找不到它。

HTML2Canvas也不会捕获外部资源。

我试图在FrontEnd上完全解决这个问题，我能做到的最好是在页面上的canvas元素上打印svg，我可以点击并将图像保存为图像，但无法直接下载ClientSide上的svg到.png。

我仍然希望有人可以给我更多建议和帮助;我非常渴望了解更多信息

下载D3JS图表为png / pdf / jpeg

1 个答案: