Canvasでのイメージ操作を行うオンラインデモを作成しました
Taiyo FUJII
Hackathonでプロトタイプを作成したpbeditのオンラインデモンストレーションを公開しました。
http://web.me.com/t_trace/pbedit/image_loader.html
並んでいるサムネイルをクリックすると編集画面へ移動します。
編集画面ではRGBチャンネルのスケール編集を行うことができます。
（検証してないだけですが）動作環境はSafari 4.0以降のみとなります。
また、ローカルファイルで実行しているときには、クリップボード経由で
編集する画像を読み込ませることができます。コピペでOKということです。
ローカル実行のために.zipで固めたファイルも用意しました。
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が実行できるようになると、非同期処理を行うことで
重めの画像処理を行うアプリケーションが作成できる手応えが得られました。