スポンサーリンク

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

スポンサーリンク
JavaScript
スポンサーリンク

スポンサーリンク

概要

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

Canvas APIについて

Canvas API
Canvas API は JavaScript と HTML の canvas 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

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に描画された画像はピクセルに対して参照・操作することが可能なので、これを用いて画像変換処理を行うことができます。デモ画像この記事では自分がよく使うス...

物体検出

顔検出

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

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

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

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

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

デモ

顔検出 + フィッティング

GitHub - auduno/clmtrackr: Javascript library for precise tracking of facial features via Constrained Local Models

顔検出と顔特徴点のフィッティングを行うライブラリに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...
GitHub - Quramy/opencv-wasm-knnmatch-demo: Web Assembly OpenCV Feature Matching Demonstration

fabric.js

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

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

Fabric.js Javascript Canvas Library

随時更新中。

タイトルとURLをコピーしました