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

2019-01-14
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwebassemblyfabric.jsclmtrackrpico.js
    

目次

概要

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/clmvideo.html <a href="https://www.auduno.com/clmtrackr/examples/clmvideo.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/

随時更新中。

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

最新の投稿

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

DBクライアントツールはDBeaverをおすすめしたい
DBeaver について 特徴 対応DB 対応OS 利用環境 アーカイブ インストール windows mac Linux コネクションの作成 SQLを実行する その他 CloudBeaverについて 今までいくつかのDB…

CentOS8 に Oracle12.2 clientをインストールする
実施した環境 セットアップ clientツールの 準備 インストール 環境変数にパスを通す 実行 libnsl.so.1: cannot open shared object file と表示される場合 CentOS8 に Oracle12.2 client…

フェールセーフやフェールソフト・フールプルーフ 障害対策用語の整理

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

Gitにプロキシを設定する
プロキシを設定する 確認 Gitでプロキシを通しておくメモです。 プロキシを設定する 以下のコマンドでproxyを通します。 ※ がプロキシのURL…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

Tags

Dates

© 2021   404 motivation not found