画像編集するHTML5デモ

HTML5 3DaysのHackathonでプロトタイプを作成したpbeditのオンラインデモンストレーションを公開した。

http://web.me.com/t_trace/pbedit/image_loader.html

並んでいるサムネイルをクリックすると編集画面へ移動し、RGBチャンネルのスケール編集が可能です。
動作環境はSafari 4.0(検証してないだけですが)。

ローカルファイルから実行するとクリップボード経由で編集する画像を読みこんで編集できます。
ローカル実行のために.zipで固めたファイルはgithubからどうぞ。

http://github.com/ttrace/pbdit/downloads

このデモンストレーションを作成するにあたっていくつかHTML5 3Daysで提案されていたことを試みました。

1. Web Workersを用いた非同期処理
2. Web Database / Storageを用いた保存

結論から言うと、いずれもパフォーマンスの面であきらめています。

Safariの現状のWeb Workersでは、Web Storageを用いることができないため、Workersへデータを渡す方法はonmessageとpostMessageを用いたメッセージングのみとなりますが、受け渡しできるのはstring(文字列)のみとなります。

canvasのPixelDataArrayを文字列に展開して1000x1000ピクセルの画像を受け渡しすることは、64bit Safariであっても4GBしかメモリを積んでいない環境ではオーバーヘッドが大きすぎて断念。

また、Database、Storage、いずれも1000x1000程度で30MB程度の容量を消費してしまい、数値列の変換にかかるコストが無視できないほど大きいものとなります。
Web Databaseを用いた処理は上記のソースコードコメントアウトされたまま残っていますので、興味がある方はぜひ眺めてみてください。

CanvasやCSS3の描画速度、レスポンスはきわめて軽快であり、複雑なインターフェイス操作にも耐える。

重い処理の非同期化が課題ではあるけどWorkersへオブジェクトのままでデータを渡せるか、WorkersでopenDatabaseが実行できるようになると解決するだろうからそれまで待ちだなぁ。