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

Question

為什么不使用html2canvas和canvas2image以PNG格式保存圖表？ 這是我的代碼的鏈接

<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

我找到了解決方案。 因為d3pie使用svg標記，所以必須使用saveSvgAsPng.js來保存圖表。 解

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