canvas要素コンテンツ生成画像ファイル

準備作業
canvas要素が現在表示されている内容を画像ファイルとして生成するには、まずcanvasのデータを取得し、HTML 5 要素の規格でtoDataURL()の方法でcanvasの内容を指定されたフォーマットのデータURLとして生成することができます.

//      id cvs canvas  
var dataurl = document.getElementById('cvs').toDataURL('image/png');

DataURLをpngタイプの画像ファイルに生成する必要があります.この操作はローカルで行われ、サーバがファイルの生成を支援する必要はありません.次の2つの方法があります.
方法一利用HTML 5 ラベルのdownloadプロパティ
HTML 5規格では、ラベルには新しいプロパティdownloadがあり、downloadプロパティは、ハイパーリンクがダウンロードすべきファイルであることを示すために使用されます。たとえば、

ダウンロード

downloadプロパティは、ダウンロードファイルの名前を指定するために割り当てられます.たとえば、

ダウンロード

例
これで、aラベルのhrefプロパティにDataURLを割り当て、downloadプロパティを使用してダウンロード可能なピクチャに変換できます.

var dataurl = document.getElementById('cvs').toDataURL('image/png');
var a = document.createElement('a');
a.href = dataurl;
a.download = "sample";
a.click();

互換性
現在はChromeとFireFoxのみがdownloadプロパティをサポートしています
メソッド2 DataURLのMime-typeの変更
取得したデータURLをaラベルのhref属性に直接割り当てると、リンクをクリックするとブラウザは新しいウィンドウで画像を開くだけで、ダウンロードは直接実行されません.DataURLのMime-typeをoctet-streamに変更し、ブラウザに強制的にダウンロードさせることができます.
例

var dataurl = document.getElementById('cvs').toDataURL('image/png').replace("image/png", "image/octet-stream");
var tmpa = document.createElement('a');
a.href = dataurl;
a.target = "_blank";
a.click();

互換性
この方法はほとんどの主流ブラウザで使用できますが、octet-streamにはファイル名や拡張子の情報は含まれていません.この方法でダウンロードしたファイルは拡張子のないファイルです.ブラウザのデフォルトの名前は「ダウンロード」または「unknown」です.