将 Canvas & 图例另存为图像

Question

我有一个现有应用程序使用 html canvas 来生成图表。保存图形时还有一个图例也需要保存。目前，如果我右击保存图片，只保存图表。

我遇到了 Cavas2Image.js 和 html2canvas.js 并且在我的项目中都实现了。

我连接了一个按钮来保存图像。目前，点击它会创建一个下载文件，但它只是称为下载，没有扩展名。如果我添加扩展名 .png，它就会正常工作。我不知道为什么这不是由 Cavas2Image 完成的，这就是使用该库的全部意义所在。我设置了断点，它正在点击添加 .png 扩展名的方法。

基于canvas2image.js的documentation（或缺少），我应该可以使用单一方法来保存我的canvas:

Canvas2Image.saveAsImage(canvas, null, null, "png");

这是我的完整代码块：

<div class="row">
    <div class="col-md-12">
        <div id="widget" class="canvas__container">
            <canvas id="lineChartCanvas" class="chart chart-line canvas__canvas" chart-data="data" chart-labels="labels" style="height: 300px; width: 95%;"
                    chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        <input type="button" class="btn btn-primary" id="btnSave" value="EXPORT CHART" />
    </div>
</div>
<script>                    
    $(function () {
        $("#btnSave").click(function () {
            html2canvas($("#widget"), {
                onrendered: function (canvas) {
                    theCanvas = canvas;
                    document.body.appendChild(canvas);

                    // Convert and download as image 
                    //Canvas2Image.saveAsPNG(canvas);
                    Canvas2Image.saveAsImage(canvas, null, null, "png");

                }
            });
        });
    });
</script>

我正在使用上面列出的两个 javascript 文件，尽管它们未在此处显示。

Answer 1

看看。

您只需使用 html2canvas 即可。我已经根据 linked 的答案修改了您的代码，现在可以使用了。虽然，我不太确定这是否是您想要的。您可以随意命名文件并将其保存为 png（fiddle 为 jpg）。

检查一下，如果您需要更多帮助，请告诉我。

$("#btnSave").click(function () {
       canvasdiv = document.getElementById('lineChartCanvas');
       html2canvas(canvasdiv, 
          {
              onrendered: function (canvas) {
                var a = document.createElement('a');
                // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
                a.href = canvas.toDataURL("image/png").replace("image/jpeg", "image/octet-stream");
                a.download = 'somefilename.jpg';
                a.click();
              }
          });
 });

这是 JSFiddle* 示例的 link。

* fiddle 加载 bootstrap

将 Canvas & 图例另存为图像

Save Canvas & Legend as image

jquery

html2canvas