Amazonの本を立体化する

元ネタはウェブ上でよく出くわすあの光景って本当に「あるべき姿」なの？ - Liner Note
ちょっと面白そうだったのでCanvasの練習もかねて書いてみた。
環境：Firefox3.0.4 + JavaScript

方針としては以下の通り

1. 画像をCanvasにコピー
2. getImageDataで画像のピクセルデータを取得
3. 空白を無視するようにしつつ本の左端を取得
4. そこからグラデーション含めた曲線を描いて立体的に
5. 厚みはAmazonのページ数から求めるとそれっぽいな
6. 裏側は背表紙＋綴じこまれた紙を描画

Before→After

ひどい結果も多々あるが物によってはそれなりに見れる。
中身検索系は全滅だな。

制約の多いソース

Greasemonkey化を目指していたのだが、結局動くようには出来なかったのでHTML版を。
制約1：ローカルでも良いのでWebサーバ上で動作させるべし。
制約2：別サーバの画像は扱えないので画像も同じフォルダに入れるべし。
ソースファイル(lzh)

問題にぶち当たりまくっている内に、色々と学べたので、別エントリで起こすことにする。