Javascriptで画像ファイルをドラッグアンドドロップでプレビュー表示

画像ファイルをドロップしてください

以前にWebページでファイルをアップロードするフォームの作り方を調べたことがあり、その際ファイルをドラックアンドドロップ出来ることを知りました。そのローカルファイルをJavaScriptで読み込むことが出来て、HTMLにimgエレメントを追加出来れば画像オブジェクトを動的に表示できるのではないかと思い試してみました。

このようなページを作る場合一度サーバーに画像をアップロードし、サーバーサイドでHTMLをレンダリングしてWebブラウザに表示する方法しか無いと思っていたので、動いた時には結構驚きました。

今回はimgエレメントで画像を表示していますが、canvasで画像を読み込むことが出来ればJavaScriptを使い画像加工アプリケーションが作れる可能性があります。個人的にC#(WinForms)とOpenCVSharpでデスクトップアプリケーションとして作成していますが、これをHTMLとJavascriptでWebアプリケーションとして作成することが出来るということになり夢が広がります。パフォーマンス的には問題がありそうですが、お手軽に実行環境が構築できる点は魅力的です。

さらに調べてみたら、OpenCV.jsというJavascript用のOpenCVライブラリがあるようで、ますます興味がひかれます。