chart.jsで描写されたグラフをダウンロード

Blob(Binary Large Object)を使う

  • データ型の一つで、バイナリデータ=ファイルとして使うことができる

canvasをblob型に変換する(jpeg)

var canvas = document.getElementById("canvas");
var type = 'image/jpeg';
// canvas から DataURL で画像を出力
var dataurl = canvas.toDataURL(type);
// DataURL のデータ部分を抜き出し、Base64からバイナリに変換
var bin = atob(dataurl.split(',')[1]);
// 空の Uint8Array ビューを作る
var buffer = new Uint8Array(bin.length);
// Uint8Array ビューに 1 バイトずつ値を埋める
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
// Uint8Array ビューのバッファーを抜き出し、それを元に Blob を作る
var blob = new Blob([buffer.buffer], {type: type});

## 複合グラフについて
– optionによって、軸の設定を変更できる
option: {scales: {yAxes: [(縦軸)], xAxes:[(横軸)]}}
https://qiita.com/kd9951/items/aece80abe0bd42b3b5d3

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です