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

JavaScript
スポンサーリンク




スポンサーリンク

概要

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

Canvas APIについて

Canvas API
HTML5 で導入された HTML の canvas 要素は、 JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。

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

ImageDataについて

ImageData
ImageData インターフェイスは、canvas 要素の領域の基礎をなすピクセルデータを表します。ImageData() コンストラクターや、canvas に関連付けられた CanvasRenderingContext2D オブジェクトの createImageData() メソッドおよび getImageData...

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

基本的な画像変換


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

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

別ウィンドウで開く

JavaScript + canvasで画像変換処理をするときのスニペット
JavaScript + canvasで画像変換処理をするときのスニペット
概要canvasはJSによって図形などを描画する際に使われます。canvasに描画された画像はピクセルに対して参照・操作することが可能なので、これを用いて画像変換処理を行うことができます。デモ画像この記事では自分がよく使うス...

物体検出

顔検出

tehnokv/picojs
A face detection library in 200 lines of JavaScript - tehnokv/picojs

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

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

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

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

デモ

顔検出 + フィッティング

auduno/clmtrackr
Javascript library for precise tracking of facial features via Constrained Local Models - 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枚の画像から特徴点を検出し比較するデモと、その解説記事とレポジトリです。
デモ

[OpenCV][WebAssembly]ブラウザで2画像の特徴量比較してみる - Qiita
## はじめに このエントリは、画像解析ライブラリであるOpenCVをWeb Assemblyとしてビルドしてブラウザで動かす、というのを一通りやってみたメモです。 主なコンテンツとして下記を含みます。 - OpenCVのwasm...
Quramy/opencv-wasm-knnmatch-demo
Web Assembly OpenCV Feature Matching Demonstration - Quramy/opencv-wasm-knnmatch-demo

fabric.js

fabricjs/fabric.js
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser - fabricjs/fabric.js

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

Fabric.js Javascript Canvas Library

随時更新中。