Canvas に描いた画像を jpg や png形式ファイルで保存する

駅名標画像の(半)自動作成のために調べた内容。

HTML5のCanvasに作成した内容は、Blob形式に変換することで、プログラム操作でファイルに保存することができる。

toBlob() 関数を Canvas に適用すると、デフォルトでは png形式に変換されるが、オプションで jpg を指定することで、この形式でへの変換も可能。

// canv に描画済の前提
function saveImg(canv,station_aux){
// Blob形式に変換する
canv.toBlob(function(blob){
//console.debug(blob);
// ファイル名の指定 (例) 1234567_isnb_001.jpg
var fname =station_aux.station_cd + '_isnb_001' + '.jpg';
// ファイルを保存する
saveAs(blob, fname);
}, 'image/jpeg');  // 画像形式の指定
}