画像処理を JavaScript で行ってなんかのサービスを作る実験

javascript canvas jsonp

最近 JS + JSONP だけを使って何かつくるのがマイブームなのですが、今回は 2 つの Twitter アカウントのプロフィール画像の類似度を調べるというものを作ってみました。

似たもの診断

「Canvas のセキュリティモデルでちょっとはまった件 (2)」で使った手法を用いて、画像のピクセルデータを取り込み、HSV 変換、DCT などの処理をする、ということを JavaScript のみで実現しています。

ちなみに理論とかはあんまりよくわかってないので適当です。全く似ていない画像が似ていると診断されたり、その逆もありますが、PoC ということで勘弁。

追伸: そもそも canvas で drawImage() と getImageData() サポートしているブラウザじゃないと動かない。Safari だと data URI の画像を canvas drawImage() したところでセキュリティーエラーになるらしく、動かない。

追伸2: 書き忘れましたが、loadImageData() のコードは、id:mattn のこれを元に改善しました。感謝です！