为啥不使用 html2canvas 和 canvas2image 将图表保存为 PNG 格式？

Posted 2023-05-07

【中文标题】为啥不使用 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 文件为空。

【参考方案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>