やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API

http://ochinchin.org/~udonchan/lgtm_gen/

コードはこのへんにある。 いわゆる HTML5 っぽいプログラムで、File API 使ってローカルの画像ファイルを canvas 読み込んで編集するという練習課題的プログラム。

canvas をどうやってファイルに落とすかのやり方はいろいろ思案したのだけれども、 今のところ以下のような書き方をしている。

var type = 'image/png';
var url = $canvas[0].toDataURL(type);
var link = document.createElement('a');
link.href = url;
link.download = 'output.png';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);

download attributeを含んだa エレメントを生成して、クリックイベントを発火させている。 ただ、この方法だと強制的に指定したファイル名で保存されてしまう。 本当はファイル保存のダイアログが表示されると良いのだが、良い方法が思いつかなかった。

Reference

LGTM.in/g