フロントエンド開発Blog

オレには鈍器がある

FIleAPI , JavaScript , canvas , ドラッグアンドドロップ , 画像編集

1. FileAPIでローカルファイルを読み込み(input:file ないし ドラッグアンドドロップをトリガーにして発動)
2. readerからimg出力
3. imgをcanvasに変換してdrawImage
4. 画像の短辺を画像表示枠に収まるように縮尺を変更
5. 長辺方向に画像をスライドして表示できるようなイベントを割り当て
6. filterをcanvas上でかけて
7. imgとしてgenerate

というプログラムになります。filterの種類はとりあえず3つだけ用意しました。
filterバリエーションを増やしたり、拡大縮小ボタンをつけたり、Blobをサーバサイドに送信する処理を付け足すとインスタみたいなWEBアプリが作れそうですね。

とまあドラッグアンドドロップした画像をcanvas上に表示し、トリム・フィルタを当ててimg要素に出力するサンプルを作成しました。filterを充実させたり、サーバサイドに投げるような処理を追加するとインスタグラムみたいな機能が作れちゃいますね。canvasとJavaScriptを組み合わせるといろんなことができて楽しいですね。

ページトップへ

関連ページ

ページトップへ