Question

我有一个使用html画布生成图形的现有应用程序。保存图表时，还需要保存一个图例。 Currenlty，如果我右键单击保存图像，只保存图表。

我遇到了Cavas2Image.js＆amp; html2canvas.js并已在我的项目中实现。

我已经连接了一个按钮来保存图像。目前，当点击它创建了一个下载文件，但它只是被称为下载，没有扩展名。如果我添加扩展名.png，那么它可以正常工作。我不知道为什么Cavas2Image没有做到这一点，这是使用该库的重点。我提出了断点，它正在尝试添加.png扩展名。

基于canvas2image.js的documentation（或缺少），我应该能够使用单一方法来保存我的画布：

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

查看this answer。

您可以使用html2canvas完成此操作。我已根据链接的答案修改了您的代码，现在可以使用了。虽然，我不太确定这是否是你想要的。您可以根据需要为文件命名，并将其保存为png（小提琴为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 *示例的链接。

* 小提琴加载了bootstrap

Save Canvas＆amp;图例为

1 个答案: