Javascript 下载D3JS图表，格式为png/pdf/jpeg

我一直在寻找这个问题的答案，我有一个svg形式的D3Js图表。svg有圆、文本、线、图像等属性（以.png形式）。我可以下载一个.png文件形式的D3Js图表，但我无法从图表中获取图像！。我研究过html2canvas，但它不支持svg格式

html

我已经达到了极限，我真的很感激一些帮助，代码示例将是伟大的

---

谢谢

所以，在尝试解决这个问题几周后，终于想出了解决方案
1.如果有跨域或外部源（在本例中，我的图像来自AmazonS3）

1.1。将整个svg转换为字符串，我使用xmlSerialize将svg转换为字符串（svg是xml数据）
1.2. 对后端进行api调用
1.3. 接收字符串，使用ApacheBatik库（我们的后端是JavaSpringboot）并将字符串转换为.png/.pdf

我尝试过使用canvg，这很好，但它将svg转换为画布并污染画布，因为其中存在外部资源（请让e知道，如果有任何方法更改它，我无法找到）

HTML2Canvas也不会捕获现有的外部资源

我试图在前端完全解决这个问题，我能达到的最好效果是在页面上的画布元素上打印svg，我可以右键单击并将图像保存为图像，但无法直接将svg下载到客户端的.png

---

我仍然希望有人能给我一些建议&我非常渴望了解更多信息

我想你必须首先将图像转换为数据URL。@RobertLongson如果你可以指导我，请看哪一部分！，我对svg/canvas这个东西很陌生，我想我确实在click eventd中将图像转换为URL。photo需要是一个数据URL（对内部数据的引用），而不是对png文件的外部引用。@RobertLongson外部引用有什么问题？我的意思是，我有来自api的图像，有成千上万的图像，你说我需要将它们保存在我的项目目录中，检查我的由d3js生成的“”标记（下面），在svg元素中，我能够获得文本，但问题只在于图像<代码>汤姆A.阿尔伯格

 <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>

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();
    };
});

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;
        }
    });