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

【问题标题】：Why does not save the chart in PNG format with html2canvas and canvas2image?为什么不使用 html2canvas 和 canvas2image 将图表保存为 PNG 格式？
【发布时间】：2019-05-31 06:31:34
【问题描述】：

为什么不使用html2canvas 和canvas2image 将图表保存为PNG 格式？ 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>

【问题讨论】：

我不明白是什么问题，请提供信息发生了什么以及预计会发生什么。
嗨！不将图表保存为 PNG 图像。 PNG 文件为空。

标签： javascript save

【解决方案1】：

我找到了解决方案。因为 d3pie 使用 svg 标签，所以必须使用 saveSvgAsPng.js 来保存图表。 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>

【讨论】：