JavaScriptによる画像処理と便利なライブラリ

目次

1. 概要
2. 基本的な画像変換
3. 物体検出
4. opencv-と-webassembly
5. fabricjs

概要

JavaScript + canvasによって行える様々な画像処理方法について紹介します。

Canvas APIについて

https://developer.mozilla.org/ja/docs/Web/HTML/Canvas

HTML5には画像等の処理が行える強力なAPIである「Canvas」が備わっています。 これによりJavascriptによって様々な画像・図形の描画や、グラデーション、動画のリアルタイム加工などが行えます。

ImageDataについて

https://developer.mozilla.org/ja/docs/Web/API/ImageData

ImageDataインタフェースによってcanvasに描画された画像をRGBAの画像配列として扱うことができます。 これにより様々な画像処理が可能となります。

基本的な画像変換

**ブラウザ上でグレースケールや2値化などの処理を行った時の様子**

この画像のようにcanvasの簡単なメソッドを組み合わせることによって簡単な画像変換を行うことができます。 この程度の処理であれば数行で実装できます。

別ウィンドウで開く

https://tech-blog.s-yoshiki.com/2018/09/448/

物体検出

顔検出

https://github.com/tehnokv/picojs

canvasを用いて顔検出が行えるライブラリの一つにpico.jsがあります。

わずか200行で実装されており、とても軽いようです。 また、WASM(※)版も用意されているようです。 ※WASMについては「OpenCV と WebAssembly」の項目で紹介

デモではカメラからの入力画像から顔を検出し赤い円を描画しています。

YouTubeにもデモ動画が公開されています。

デモ

顔検出 + フィッティング

https://github.com/auduno/clmtrackr

顔検出と顔特徴点のフィッティングを行うライブラリにclmtrckrがあります。 clmtrackrは動画・画像から、顔やパーツの位置や傾きを検出することができます。

https://www.auduno.com/clmtrackr/examples/clm_video.html デモ (外部リンク)

clmtrackr example from Audun Mathias Øygard on Vimeo.

OpenCV と WebAssembly

画像処理や機械学習等の機能を持つ強力なライブラリであるOpenCVをWASMとしてビルドしブラウザ上で処理できるようにする方法があります。

以下のは2枚の画像から特徴点を検出し比較するデモと、その解説記事とレポジトリです。 デモ

https://qiita.com/Quramy/items/5edf1318979b1f165a5a

https://github.com/Quramy/opencv-wasm-knnmatch-demo

fabric.js

https://github.com/fabricjs/fabric.js

canvas内で画像をオブジェクトとして操作する場合に重宝するインタラクティブなライブラリです。 svgからcanvasへ(canvasからsvg)への出力にも対応しています。

http://fabricjs.com/

随時更新中。