将 D3JS 图表下载为 png/pdf/jpeg答案

【问题标题】：Download D3JS chart as png/pdf/jpeg将 D3JS 图表下载为 png/pdf/jpeg
【发布时间】：2017-01-08 09:23:13
【问题描述】：

我一直在寻找这个问题的答案，我有一个 svg 形式的 D3Js 图表。svg 具有圆形、文本、线条、图像的属性（以 .png 形式）。我能够下载 D3Js图表为 .png 文件，但我无法从图表中获取图像！我查看了 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;
        }
    });

我有点碰到天花板了，我真的很感激一些帮助，代码示例会很棒谢谢你

【问题讨论】：

我想你必须先将图像转换为数据 URL。
@RobertLongson 如果你可以指导我在哪一部分！，我对整个 svg /canvas 的东西非常陌生，我想我确实在点击事件中将图像转换为 url
d.photo 必须是数据 URL（对内部数据的引用），而不是对 png 文件的外部引用。
@RobertLongson 外部参考有什么问题？我的意思是，我有来自 api 的图像并且有成千上万的图像，你说我需要将它们保存在我的项目目录中，查看我的“”标签（下）生成通过 d3js，在 svg 元素内，我能够获取文本，但问题仅在于图像！！！
<g class="node" style="fill: rgb(81, 134, 236);" transform="translate(775.2249292728861,477.93642590508136)"><circle r="9" class="circleClass" style="stroke: rgb(255, 255, 255); stroke-width: 1px;"></circle><image class="circleClass" x="-25" y="-25" height="50" width="50"></image><text class="nodetext" dx="12" dy=".35em" style="font-size: 15px; opacity: 1; letter-spacing: 0.03em; pointer-events: none;">Tom A. Alberg</text></g>

标签： javascript jquery d3.js svg

【解决方案1】：

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

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

我尝试过使用canvg，这很棒，但是它将svg转换为画布并污染了画布，因为其中存在外部资源，（请告诉e，如果有任何方法可以更改它，我可以但是找不到）。

HTML2Canvas 也不捕获存在的外部资源。

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

我还是希望有人能给我更多的建议，非常渴望了解更多

【讨论】：