为什么不使用html2canvas和canvas2image以PNG格式保存图表？

Question

Why does not save the chart in PNG format with html2canvas and canvas2image ? This is link for my code

<div class="canvas__container" style="width:100%; height:100%">
<button id="btnSave" title="Save as PNG" style="position: absolute; left: 4px; top: 4px;">Save</button>
<div id="myChart1"></div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="//superal.github.io/canvas2image/canvas2image.js"></script>
<script>
$(function() {
    $("#btnSave").click(function() {
        html2canvas($("#myChart1"), {
            onrendered: function (canvas) {
                Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height, "Image_" + Date.now());
            }
        });
    });
});
</script>

Answer 1

I've found the solution. Because d3pie uses the svg tag, you must use saveSvgAsPng.js to save the diagram. solution

<div class="canvas__container" style="width:100%; height:100%">
<button id="btnSave" title="Save as PNG" style="position: absolute; left: 4px; top: 4px;">Save</button>
<div id="myChart1"></div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//exupero.org/saveSvgAsPng/src/saveSvgAsPng.js"></script>
<script>
$(function() {
    $("#btnSave").click(function() {
        saveSvgAsPng(document.getElementById("myChart1").getElementsByTagName("svg")[0], "plot_" + Date.now(), {scale: 2, backgroundColor: "#FFFFFF"});
    });
});
</script>