Canvas+JavaScriptを使って画像解析「Resemble.js」
Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。
Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble.jsを紹介します。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.20.47.1361951351.png)
一例。写真のRGB解析と明るさを解析しています。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.21.46.1361951355.png)
二つの画像を比較しています。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.21.54.1361951360.png)
色を排除した比較。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.22.20.1361951366.png)
サンプル。これで間違い探しが快適になりますね。
Resemble.jsではresembleという関数を提供します。これにファイルデータを渡すと、RGBと明度の値が返ってきます。さらに二つ目の画像を渡すと差分のパーセントやその差分となる画像データが返却されます。そのまま使うのはもちろん、画像解析の手法として参考になる部分も多そうです。
Resemble.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Canvasを使うとアップロードされるファイルのデータを読み取るのが簡単にできます。そして画像を加工したり、データを読み取ることができます。特に縮小や回転であれば簡単です。画像アップロードの前にサムネイルを表示したり、簡単な加工を施した上でアップロードなんてのも容易に実現できます。
さらに進めば動画の一部だけをアップロードしたり、テキストデータを付与してからアップロードもできます。これまではアップロードした後に加工を行うのが一般的だったのが、Webブラウザが加工を行う場所になる可能性があります。加工を予め行えればサーバの負荷も減り、アップロードサイズを減らすこともできるようになるはずです。