複数canvasを表示状態のまま一つの画像に

質問

先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。
function imageDownload() {
var chartWidth = 350;
var chartHeight = 242;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.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);

そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。
<div class="row" style="width:100%;" >
<div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c
<canvas id="myChart1" width="400px" height="230px"></canvas></div>
<div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" >
<canvas id="myChart2" width="210px" height="210px"></canvas></div>
<div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;">
<canvas id="myChart3" width="210px" height="210px"></canvas></div>
<div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;">
<canvas id="myChart4" width="210px" height="210px"></canvas></div>
</div>

しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。
そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。

回答No.19

retorofan

補足のコードを拝見しました。

注目箇所は、ここ。
// グラフを貼り付け
let arr = [0.5,0,1.2,2.4];　//画像幅が1536pxの場合は変数４個
let arr = [0.5,0,0.8,1,1.6];//画像幅が1920pxの場合は変数５個
どちらも４個に修正する必要があると思います。

全体をまとめてみましたので、お試ししてみてください。
function imageDownload() {

//画面サイズによる変数定義
var para = (screen.width == 1536) ? 0 : 1;
var chartWidth = [230, 270][para];
var chartHeight = [220, 250][para];
var imageType = "image/png";
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas");

bufferCanvas.width = [874, 783][para];
bufferCanvas.height = [550, 500][para];
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);

// グラフを貼り付け (下記のうちの１つ)
var arr = (para==0) ? [0.5,0,1.2,2.4] : [0.5,0,0.8,1];
//var arr = (para==0) ? [0.5,0,1.2,2.4] : [0.5,0,0.8,1.6];

var ch = (para==0) ? 264 : 225;
for (var i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
250 * arr[i-1],
i <= 1 ? 0 : ch
);
}

var imageURL = bufferCanvas.toDataURL(imageType);
//-------------------------------------------------------------
FileMaker.PerformScript("script02", imageURL);
}

お礼

単純にif文で分岐したための余分なコードを纏めていただいたほか数値等ですっきりした形にしていただきありがとうございます。
>let arr = [0.5,0,0.8,1,1.6];//画像幅が1920pxの場合は変数５個
これ、エディターの元コードをそのままコピペしたミスです。filemakerの場合使い方によってjs文をそのまま使えないので一度エスケープ処理等の加工を加えています。そこではこれを修正済みでした。
なお
var arr = (para==0) ? [0.5,0,1.2,2.4] : [0.5,0,0.8,1];
//var arr = (para==0) ? [0.5,0,1.2,2.4] : [0.5,0,0.8,1.6];
は下の方が正解ですよね
いま、最初にwebにコードの部分で
<canvas id="myChart1" width="310px" height="210px"></canvas></div>
の使い方は止した方がいいとされていましたが、今回のようにさらに一つのcanvasに纏めた場合グラフの大きさが同じになるのでこちらもありかなと考えています。

補足

モニターが違っても印刷の際グラフの大きさを近づけるために試した結果
cssで幅高さを設定し<div class="chart1">の場合
function imageDownload() {
var para = (screen.width == 1536) ? 0 : 1;
var chartWidth = [230, 270][para];
var chartHeight = [220, 250][para];
var imageType = "image/png";
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas");
bufferCanvas.width = [910, 783][para];
bufferCanvas.height = [650, 500][para];
bufferCanvas.style.display = "none";
微妙に違うがbufferCanvas.widthの値でグラフの大きさが決まる。

<canvas id="myChart1" width="300px" height="220px"></canvas>の場合
function imageDownload() {
var para = (screen.width == 1536) ? 0 : 1;
var chartWidth = [290, 210][para];
var chartHeight = [290, 210][para];
var imageType = "image/png";
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas");

bufferCanvas.width = [960, 783][para];
bufferCanvas.height = [650, 500][para];
chartWidthの値で大きさが決まる

あくまでfilemakerの設定が加わった上での印刷結果を見た目で判断しただけですのでこの数値は正確性に欠けるうえ果たしててこれが正解かも判断しかねています。なお、配置の調整はこれからです。

回答No.18

retorofan

パソコンの場合でも、
グラフの1つだけが大きく表示されたりする場合があります。
（グラフのレンダリングにパワー・時間を要するため）
その時は、F5（再読み込み）させて解決しました。

モニターによっては、適正に配置されないようですね。
同じ環境が無いため、再現・対応は難しいです。
対策としては、
画像作成関数 imageDownload() のパラメーターを
ラジオボタン等で切り替えるなど工夫されたら
使用するモニターに合ったグラフ間を保てるようになると思います。

お礼

有り難うございました。
やはり解像度が違うモニターでは難しいのが分かりました。なお、前にfilemakerのwebビューアで試した云々の時書き忘れましたが普通にwebでも同じような重なり等の状況でした(ちなみにfilemakerのwebビューアで使われているレンダリングエンジンもMS Edge WebView2です)
。
pxで大きさや配置が設定出来ないかと思い試してみましたがここの部分では無理みたいでした。
両方のモニターで妥協できる数値にするか、別々のパターンを用意するかどちらでもfilemaker上で処理出来るので塩梅のいいのを模索します。

補足

グラフの大きさも解像度によって相対的に決まるみたいなのか調節がききませんでしたが、配置はそこそこ調節でモニターに合わせて作るようif文で分岐しました。
function imageDownload() {
if (screen.width == 1536) {
var chartWidth = 230;
var chartHeight = 220;
var imageType = "image/png";
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas");
bufferCanvas.width = chartWidth * 3.8;
bufferCanvas.height = chartHeight * 2.5;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
let ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
let arr = [0.5,0,1.2,2.4];
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
250 * arr[i-1],
i <= 1 ? 0 : chartHeight * 1.2
);
}
} else if (screen.width == 1920){
var chartWidth = 270;
var chartHeight = 250;
var imageType = "image/png";
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas");
//var screenWidth = screen.width;
bufferCanvas.width = chartWidth * 2.9;
bufferCanvas.height = chartHeight * 2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
let ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
let arr = [0.5,0,0.8,1,1.6];
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
250 * arr[i-1],
i <= 1 ? 0 : chartHeight * 0.9
);
}
}
var imageURL = bufferCanvas.toDataURL(imageType);
//-------------------------------------------------------------
FileMaker.PerformScript("script02", imageURL);

回答No.17

retorofan

拙作のコードで確認していただき
ありがとうございます。

あなたは、次のようにこう書きました。

＞先にせっかく教えてもらった1×3の配置なのに
>それと、配置をCSSで新たに組み変えるのは意味がないので
今までのままのほうがいいです。

そうは言っても、今回のテーマとして、こうも書かれています。
＞上下2個づつの配置表示したものを一つの画像にする・・・

私は、この課題に沿うようにお答えしました。

お礼

「そうは言っても、今回のテーマとして、こうも書かれています。
＞上下2個づつの配置表示したものを一つの画像にする・・・

私は、この課題に沿うようにお答えしました。」
の部分に関しては、一度も希望したことはありません。すでに上下2個づつでは位置することはそのコードの内容如何に関わらずすでに実現している話で、教えられた1×3の表示に適用すると2×2となり大きさの違うグラフがあるため上の部分では重なる結果となると事を示し示しただけです。
もし問題があるとすれば、私の質問がだらだらとしたもになっているため、そのどこか部分でを取り違えられたものと思われます。
最初に
>文章的に何がしたいのかわからないのですが。
と指摘された内容ですので誤解を与えたこと申し訳ありません。

補足

filemakerのwebビューアでもらったコードをそのまま実行したところ大きなモニター（ノートPCに接続）場合は問題なく合成され同じ画像が良好な配置で出力されますが。ノートPCのモニターで実行した場合、合成、出力画像共に重なり右及び下が切れた状態となりました。
一応報告まで

回答No.16

retorofan

続き

<script>
onload = function() {

// 色の設定 (original)
const color1 = ['red','green','skyblue'];
const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)'];

//グラフの描画関数
function displayChart(canvasId, chartType, datasets, options) {
var ctx = document.getElementById(canvasId);

var myPieChart = new Chart(ctx, {
type: chartType,
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// Ｘ軸のラベル
datasets: datasets
},
options: {
plugins: {
//responsive: false,
title: {
display: options.title.length > 0,
// タイトルがあれば表示
text: options.title
},
legend: {
// 凡例
//onClick: function () { return false }, //凡例クリック時、何も返さないコード
display: true,
// 表示の有無
position: options.legendPosition,
// 表示位置
labels: {
usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか
}
}
}
}
});

return myPieChart;
}

const label1 = [
{label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]},
{label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]},
{label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]}
];

const datasets = [
{label: label1[0].label,data: label1[0].data},
{label: label1[1].label,data: label1[1].data},
{label: label1[2].label,data: label1[2].data}
];

//-------------------------------------------------------------
//Bar chart
const barChart = displayChart('myChart1', 'bar', datasets,{
title: 'Bar chart',
usePointStyle: false,
legendPosition: 'top'
});

for (let i=0; i<datasets.length; i++){
datasets[i]["backgroundColor"] = color1[i]; //カラー設定
}

barChart.update(); //更新
//-------------------------------------------------------------

//Pie chart
for (var i = 0; i < 3; i++) {
PieChart = displayChart(`${'myChart'+(i + 2)}`, 'pie', [label1[i]], {
title: label1[i].label,
usePointStyle: true,
legendPosition: 'left'
});

label1[i]["backgroundColor"] = mycolor; //カラー設定
PieChart.update(); //更新
}

//--------------------------------------------------------------------
// ４つのグラフを1つの画像でダウンロードするコード
//--------------------------------------------------------------------
function imageDownload() {
var chartWidth = 350;
var chartHeight = 242;

var imageType = "image/png"
var bufferCanvas = document.createElement("canvas");
bufferCanvas.style.border = "solid 1px red";

bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.2;

console.log("canvas size",bufferCanvas.width, bufferCanvas.height);

// bufferCanvas.style.display = "none";

document.querySelector(".console").appendChild(bufferCanvas);

var ctx = bufferCanvas.getContext("2d");

ctx.fillStyle = "rgb(255, 255, 255)"; // 背景色を設定（しない場合は透過）
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);

// 各グラフを合成用キャンバスに貼り付け
for (var 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); //ＵＲＬを生成

//------------------------
//リンクを作成
const a = document.createElement("a");
a.style.display = "block";
a.href = imageURL;
a.download = "chart.png";
a.textContent = "画像でダウンロード";

//a.click();

document.querySelector(".console").appendChild(a);
}
//グラフのレンダリングに時間を要するために一定時間経過後に実行
setTimeout(imageDownload, 3000);
//--------------------------------------------------------------------
};
</script>
</body>
</html>

お礼

retorofan さん有り難うございます。
先にせっかく教えてもらった1×3の配置なのに
>それと、配置をCSSで新たに組み変えるのは意味がないので
今までのままのほうがいいです。
何故なら、各キャンバスは見かけの位置でなくて、
オブジェクトとしてアクセス、移動、変更が自在に可能です。
極端に言えば、非表示の場合でも操作できるのですから。
見かけにこだわった私に問題があるのか・・・
web上で教えてもらったコードで再現したところ問題なく出力されました。
多分遅くなると思いますがこれをfilemakerのweb ビューアで表示させイメージを別オブジェクトフィールドに画像として挿入できるように試みてみます。filemakerでは、ビューアで表示されたグラフだけなら印刷できるのですが、他のフィールドを含めた場合難があるので一旦オブジェクトフィールドを使った印刷用レイアウトで実行する必要がある・・・
合成部分まで作っていただき有り難うございました。

回答No.15

retorofan

turu575さん
あなたの imageDownload()関数に
少し手直しすれば
お望みが叶いますよ。

ただ、次の書き方はやめたほうがいいです。
<canvas id="myChart1" width="400px" height="230px"></canvas>
正しくは、単位を付けずに以下のようにしましょう！
<canvas id="myChart1" width="400" height="230"></canvas>

それと、配置をCSSで新たに組み変えるのは意味がないので
今までのままのほうがいいです。
何故なら、各キャンバスは見かけの位置でなくて、
オブジェクトとしてアクセス、移動、変更が自在に可能です。
極端に言えば、非表示の場合でも操作できるのですから。

だいぶ苦戦している模様ですが、私のコードでお試しください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>chart.js グラフを画像でダウンロードするサンプル</title>

<style>
fieldset {
width: 700px;
margin-bottom: 5px;
}
.container {
width: 100%;
}
.container .chart1 {
width: 400px;
height: 350px;
}
.container .lateral {
display: flex;
width: 100%;
height: 300px;
}
.container .lateral div {
margin: 0 1em 0 0;
width: 300px;
height: 250px;
}
.container div > canvas {
padding: 1em;
border: solid 1px violet;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>

</head>
<body>
<h1>chart.js グラフを画像でダウンロードするサンプル</h1>

<strong>【手順】</strong>
<ul>
<li>原図エリアに４つのグラフを描画する。 </li>
<li>合成エリアで１つのキャンバスに合成する。</li>
<li>ボタン押下で画像でダウンロードする。</li>
</ul>

<fieldset>
<legend>原図エリア</legend>
<div class="container">
<div class="lateral">
<div class="chart1">■Bar chart 1
<canvas id="myChart1"></canvas></div>

<div>■Pie chart 1
<canvas id="myChart2"></canvas></div>
</div>

<div class="lateral">
<div>■Pie chart 2
<canvas id="myChart3"></canvas></div>

<div>■Pie chart 3
<canvas id="myChart4"></canvas></div>
</div>
</div>
</fieldset>

<fieldset>
<legend>合成エリア</legend>
<div class="console"></div>
</fieldset>

続く

回答No.14

AsarKingChang

まだ、解決しなそうでしたら、一度全体ソース
張ってみませんか？部分的な場所だけの回答をしてるので、
今どんな状態なのかは、正確にはわかってないんですよね。
（気が向いたらでOKですし、拒否しても気にしませんので！）

回答No.13

AsarKingChang

>等位置を変えて試みましたがイメージ画像の出力に至りませんでした。>何か勘違いして解釈をしているのでしょうか？
あってるように見える＾＾。
ただ、これ表示するだけで出力には無関係なので、
出力側の問題はこれでは、解決はしませんよ。
ノートとデスクトップで見え方が違うって件だけの
吸収の話なので。

お礼

有り難うございます。
>ただ、これ表示するだけで出力には無関係なので、
出力側の問題はこれでは、解決はしませんよ。
ノートとデスクトップで見え方が違うって件だけの
吸収の話なので。
そこがよく分からないとこなのですが
新しいcanvasに配置されたグラフ・・・この表示状態が
var imageURL = bufferCanvas.toDataURL(imageType);
でどのような形でbase64のイメージ画像としてエンコード出力されているのか分かりませんが多分このとき画面サイズか解像度に従って相対的な配置で自動的に処理されるのているためと推測されます・・・ただし素人考えですが、
そのためデコード処理した画像で重なっている等としか表現しようがないのです。webで表示されているものにはどちらも問題はありませんので、イメージ画像の処理の過程（今触っているコード）の問題としか・・・手作業でモニターに合わせることをすればいいだけです。

回答No.12

AsarKingChang

>ここは、今回の場合無意味な設定で不要だし
>それともCSSで設定する？
ですです！CSSです。
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
見えない画面で合成するのをシャドウレンダリングって言うんですが、
この部分です。CSSで、
bufferCanvas.style.display = "none";
これ、<canvas style="display:none">って書いてるのと同じです！。
bufferCanvas.style.width
bufferCanvas.style.heightですね。
で、
document.body.appendChild(bufferCanvas);
これだと、BODYの一番最後になってしまうので、
<div id="waaa"> この位置に動的にCANVASを入れると仮定 </div>
let waaa=document.getElementById("waaa");
var bufferCanvas = document.createElement("canvas")
waaa.appendChild(bufferCanvas);
まとめて、
document.getElementById("waaa").appendChild(bufferCanvas);
でも構いません。

または、
<canvas id="ccccc">
を事前宣言してしまい、それを、
document.getElementById("ccccc").wight CANVASのサイズ
document.getElementById("ccccc").height
document.getElementById("ccccc").style.width CANVASの表示サイズ
document.getElementById("ccccc").style.height
などで、後からサイズを作り出してもOK
CANVASはサイズの代入で初期化されるので、事前にどんなサイズであっても、
かまわない。

それと元々の、chart.js4.2のCANVASをむしろ、、、
display:noneして、見せないようにすることで、
見た目、最初から1枚のCANVASが出ているように見えるでしょう！。

お礼

具体的な内容でありがとうございます。
まだ全部試したわけではありませんが
var imageFileName = "chart.png";
// var bufferCanvas = document.createElement("canvas") let waaa=document.getElementById("waaa"); var bufferCanvas = document.createElement("canvas"); waaa.appendChild(bufferCanvas);
bufferCanvas.width = chartWidth * 3.2;
bufferCanvas.height = chartHeight * 2.2;
bufferCanvas.style.width = "100%"; bufferCanvas.style.height = "100%";
//document.body.appendChild(bufferCanvas);
等位置を変えて試みましたがイメージ画像の出力に至りませんでした。何か勘違いして解釈をしているのでしょうか？

回答No.11

AsarKingChang

>なかなか塩梅のいいものが出来ない。
CANVASって、中解像度と外解像度が違うので、
元々のchart.js4.2が出したCANVASではなく、
内部的に合成しているCANVASを画面にあわせて出せばいいですよ。
それなら、解像度の違いは、吸収されます。
要するに、画像を画面にあわせて「リサイズ」する方の概念ですね。
cssでcanvasに対してwidth,heightしても、中のCANVASはそのままで、
拡大縮小されるだけなので、
単純に100%とか書いてもOKですよ。

お礼

度々のご返事ありがとうございます。
>内部的に合成しているCANVASを画面にあわせて出せばいいですよ。
と専門の方が簡単におっしゃっても、どこに100％を記するのでしょうか？
新たなcanvasの大きさを決定しているのが
bufferCanvas.width = 860;
bufferCanvas.height = 584;
この部分だと分かりますが、ここは違うし？？？
var chartWidth = 230;
var chartHeight = 220;
ここは、今回の場合無意味な設定で不要だし
それともCSSで設定する？

回答No.10

AsarKingChang

必須ではないのですが、

offset_x,offset_yの部分で
250 * arr[i-1],
i <= 1 ? 0 : chartHeight

X成分
arrがこの関数内にないので、グローバル（つまりこの関数の外を見てる）
ので、できれば、
function getXsize() {
ここで、arrをreturnする。
}
使う側で、
let arr=getXsize();
として、それを呼んでるんだ！って空気を出した方が、
メンテしやすくなると思います。
Y成分
i <= 1 ? 0 : chartHeight
iが０になる事は元々ないので、i==1? でもいいでしょうね。

ただ、これは、別に無視してもいいです。
動くのを最優先に～って事で＾＾

お礼

恥ずかしいですけど、今回の回答全く理解できていません。解説されても多分理解できないと思います。私の知識はその程度なので。
例えば
>function getXsize() {
ここで、arrをreturnする。
これどこの話、となり・・・この程度です。
情けな質問に対し、度々の回答ありがとうございます。

補足

大きなモニターで作業していたがノートPCだけで実行すると配置が重なる等のイメージが出来上がるの結果となり、それの手直し調整がちょっと面倒なので掛けるのを止めて全て数値処理するようにした。
function imageDownload() {
var chartWidth = 230;
var chartHeight = 220;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = 860;
bufferCanvas.height = 584;
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);
// グラフを貼り付け
var arr = [0,0,280,560];
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
arr[i-1],
i <= 1 ? 0 : 250
);
}
var imageURL = bufferCanvas.toDataURL(imageType);
なかなか塩梅のいいものが出来ない。