はじめに
最近、グラフ描画にChart.jsを使っています。
Chart.jsは無料(MITライセンス)で手軽にグラフが描けるチャートライブラリです。
Bar chartsやLine charts、Area chartsなど、よく使うチャートが予め用意されていますので、初心者でも比較的手軽に使うことができます。
Chart.js公式サイト
やりたかったこと
Chart.jsで描画したcanvas上のイメージを、ボタンクリックでpng画像ファイルとしてダウンロードしたい。
(Chromeなどcanvasを右クリックで画像保存できるブラウザもありますが、別にsvgなども使っているので今回統一して「画像ダウンロード」ボタンで落とさせたい)
実装方法
サーバにデータを送信し、サーバ側から画像ファイルをダウンロードさせる方法もありますが、
今回ブラウザで完結させたかったため下記のように実装。
canvas2png.js(抜粋)
var canvas = $("#myCanvas")[0];
$("body").append("<a id='image-file' class='hidden' type='application/octet-stream' href='" + canvas.toDataURL("image/png") + "' download='mycanvas.png'>Download</a>");
$("#image-file")[0].click();
$("#image-file").remove();
※jQueryとBootstrap使っています。
#おわりに
IEでは動作しません...
はやくIE終わって欲しい...