キャンバスと凡例を画像として保存

Question

私はグラフを生成するためにhtmlキャンバスを使用する既存のアプリケーションを持っています。グラフが保存されるときにも保存する必要がある凡例があります。 Currenlty、右クリックして画像を保存すると、グラフのみが保存されます。

私はCavas2Image.js & html2canvas.jsを見つけ、私のプロジェクトで両方を実装しました。

画像を保存するためにボタンを配線しました。現在、クリックするとダウンロードファイルが作成されますが、ダウンロードと呼ばれ、拡張子はありません。拡張子.pngを追加すると正しく動作します。私はなぜこれがCavas2Imageによって行われていないのかわかりません。これは、そのライブラリを使用する全体的なポイントです。私はブレークポイントを置き、それは.png拡張を追加するメソッドを打つ。

canvas2image.jsのdocumentation（またはその欠如）に基づいて、私は私のキャンバスを保存するために、単一のメソッドを使用することができるはずは：ここでは

​​

は私の完全なコードブロックです：

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

上記の2つの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 *サンプルへのリンクがあります。

* フィドルは、ブートストラップ完全に働いた