chart.jsの複数グラフの画像化の方法

質問

いつもお世話になっております。前々回　https://okwave.jp/qa/q9834370.htmlでグラフを複数個表示する方法 を教えてもらいましたが、今回は、表示された複数個のグラフを同時に.toBase64Image()関数か.toDataURL()メソッドで画像化することが出来ないかと思い投稿いたしました。グラフが１個の場合は私にも
var canvas = document.getElementById('myPieChart');
var image = canvas.toDataURL();
とか
var image = myBarChart.toBase64Image();
とかで出来るのですが、base64エンコード文字列として複数個の場合１度別のcanvas要素に纏めてから読み込むのかあるいは個々に読み込み再配置するのかこのまま読み込めるかもさっぱり見当がつかない状態です。ご教授のほど宜しくお願いいたします。

回答No.1

Proof4 · ベストアンサー

1度別のcanvas要素に配置してまとめ、それをBase64エンコードしてダウンロードするのはよい方法の一つです。
下記のJavaScriptを追加します。

function saveAsImage() {
var chartWidth = 550;
var chartHeight = 450;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 2;
bufferCanvas.height = chartHeight * 2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
var ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
i % 2 == 1 ? 0 : chartWidth,
i <= 2 ? 0 : chartHeight
);
}
var imageURL = bufferCanvas.toDataURL(imageType);
if (window.navigator.msSaveOrOpenBlob) {
// IE11用
bufferCanvas.parentElement.removeChild(bufferCanvas);
// データ部分を抜き出し、Base64からバイナリに変換
var bin = atob(imageURL.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: imageType });
// 保存
window.navigator.msSaveOrOpenBlob(blob, imageFileName);
} else {
// IE11以外
bufferCanvas.remove();
var downloadLink = document.createElement("a");
downloadLink.type = "application/octet-stream";
downloadLink.href = imageURL;
downloadLink.style.display = "none";
downloadLink.download = imageFileName;
downloadLink.innerHTML = "Download";
document.body.appendChild(downloadLink);
downloadLink.click();
downloadLink.remove();
}
}
document.getElementById("saveAsImage").addEventListener("click", saveAsImage);

HTMLに

<button id="saveAsImage">画像として保存</button>

を追加してクリックするとグラフが1枚の画像としてダウンロードされます。以前の質問でIE11ベースのFilemakerのウェブビューアーで動作させたいとのことだったので、IE11でも動作を検証しています。

参考文献
- msSaveOrOpenBlob: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveOrOpenBlob
- Canvasに描いた画像をpngなどの形式のBlobに変換する方法: https://blog.agektmr.com/2013/09/canvas-png-blob.html

お礼

今回も丁寧な回答有難う御座います。ご教授いただいたJavaScriptをまず追加してみましたところブラウザ表示は、問題なかったのですがIE11相当のfilemakerのwebビューアでは相変わらず表示できませんでしたので前回同様にbabelで変換しようとしたらbabelの変換用の表示が変更されていたのでそこからつまずきfilemakerに表示出来るまで時間がかかり、次にfilemakerへBase64エンコードした文字列を渡す方法を模索しましたがご教授いただいたコードが理解できないためか書き換え方法が分かりませんでした。filemakerに渡すためには下記のコードを最後に付け加え今回の回答にもあったボタン処理でfilemakerに引数として渡し指定スクリプトの実行でオブジェクトフィールドにデコードして書き込みます。
function imageDownload() {
var canvas = document.getElementById('myPieChart');
var image = canvas.toDataURL();
FileMaker.PerformScript("script01", image);
}
または
function imageDownload() {
var image = myBarChart.toBase64Image();
FileMaker.PerformScript("script01", image);
}
試したことは、今回教えていただいた
var imageURL = bufferCanvas.toDataURL(imageType);以下は不要と思われたので削除し上記の設定を加えて見ましたがデータを読み込めませんでした。
いただいた回答は今回の質問に対し十分なものでしたが、ちょとひねくれたソフトへBase64エンコードした文字列を渡す方法をよろしければご教授お願いいたします。

補足

お礼投稿から、なんか回りくどい試行を繰り返していましたが、結局下記のコードでfilemakerでも画像化出来ました。
function imageDownload() {
var chartWidth = 550;
var chartHeight = 450;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 2;
bufferCanvas.height = chartHeight * 2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
var ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
i % 2 == 1 ? 0 : chartWidth,
i <= 2 ? 0 : chartHeight
);
}
var imageURL = bufferCanvas.toDataURL(imageType);
FileMaker.PerformScript("script01", imageURL);
最後の方では、
var imageURL = bufferCanvas.toDataURL();
でbase64の文字列としてエンコードは出来たのですがデコードが出来なくbase64を画像にデコードするサイトでは画像が再生出来るのにfilemakerでは出来なくデコードの方法に問題があるのか悩みました。お騒がせしましたが有難う御座います。今後、人口ピラミッドの並列表示に挑戦して行きます。また何かあれば宜しくお願いいたします。