読者です 読者をやめる 読者になる 読者になる

鈴木うどんの横須賀おもしろ生活

撮った写真や思ったことや技術ネタなど。出来るだけ大きなディスプレイで見ると良いと思う。ここでの発言は個人の見解であり、所属する組織の公式見解ではありません。

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

screen_shot_of_lgtm_gen

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