タイトルにDartって入れてませんがDartです。いま生でJavaScriptを書くのは、Cが流行り始めてる時代に生アセンブルでフルスクラッチするようなものなので、みなさんDartしましょう!(という布教)
Canvasの内容を画像ファイルとして保存させるには、まずCanvasの内容をData URLスキームに変換します。
// id="canvas"のCanvasElementがHTMLドキュメントにあるとする
CanvasElement canvas = document.query('#canvas');
String dataUrl = canvas.toDataUrl();
toDataUrl()
の引数を省略すると、デフォルトでPNG画像へのData URLスキームの文字列を返します。取得したURLは画像へのURLになるので、そのままそのURLへアクセスする形で画像の表示、またはダウンロードすることができます。
ユーザー任意でそのURLへアクセスさせる場合は、AnchorElement(aタグ)のhrefにそのURLを設定し、そのElementをドキュメントへ追加するという方法もあるのですが、今回はDart側からダウンロード自体を開始させてみます。
Qiitaのこちらの記事を参考にします。
javascriptで生成したファイルをローカルに保存する - Qiita
AnchorElement anchor = new AnchorElement()
..href = dataUrl
..download = 'image.png'
..dispatchEvent(new CustomEvent('click');
この流れでCanvasの内容を画像ファイルとしてダウンロードさせることができます。
ですが、自分の環境ですと、ダウンロードされるファイルのファイル名が「ダウンロード.png」になってしまいます。(Mac OS X 10.9, Chrome 35)原因誰か教えてプリーズ。