ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。

Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble.jsを紹介します。


一例。写真のRGB解析と明るさを解析しています。


二つの画像を比較しています。


色を排除した比較。


サンプル。これで間違い探しが快適になりますね。

Resemble.jsではresembleという関数を提供します。これにファイルデータを渡すと、RGBと明度の値が返ってきます。さらに二つ目の画像を渡すと差分のパーセントやその差分となる画像データが返却されます。そのまま使うのはもちろん、画像解析の手法として参考になる部分も多そうです。

Resemble.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Canvasを使うとアップロードされるファイルのデータを読み取るのが簡単にできます。そして画像を加工したり、データを読み取ることができます。特に縮小や回転であれば簡単です。画像アップロードの前にサムネイルを表示したり、簡単な加工を施した上でアップロードなんてのも容易に実現できます。

さらに進めば動画の一部だけをアップロードしたり、テキストデータを付与してからアップロードもできます。これまではアップロードした後に加工を行うのが一般的だったのが、Webブラウザが加工を行う場所になる可能性があります。加工を予め行えればサーバの負荷も減り、アップロードサイズを減らすこともできるようになるはずです。

Resemble.js : Image analysis

Huddle/Resemble.js · GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2