html5 + jsで楽しい画像処理

HTML5 + JS で楽しい画像処理@prprhyt

自己紹介•@prprhyt•所属 : 通信ネットワーク工学科 1 年情報通信研究プロジェクト放送研究会日本 Android の会　学生部•Loves:HTML5 Android Windows

cle_analysis 前回は・・・

今日のお話HTML5 と Javascript で画像処理の入門にチャレンジしたお話

なぜHTML5と JS？・入力画像のファイル形式をほとんど気にする必要が無い。・メインの処理を書くことに集中できる。

デメリット•1 スレッドでの処理なのでマシンパワーを生かせない•そもそも、 Javascript エンジンで実行したコードはネイティブより遅い

動機

•情メの授業で画像処理を扱っているらしい ( 風のうわさ )→ 面白そう

まず、グレースケール化Math.floor( 0.298912 * bRed + 0.586611 * bGreen + 0.114478 * bBlue );

次に二値化

拡大すると

ノイズがいっぱい^^;

ノイズの除去 ( メディアンフィルタ )

拡大すると

葉の周りがキレイになった

輪郭抽出 (4 方向ソーベルフィルタ )

以上

本当は・・・

元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用

本当は・・・窓ロゴを検出

( したかった )

元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用

本当は・・・

元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用

( 見せられないよー )

まとめ矩形の検出をするには→ ハフ（ Hough ）変換 ?速度をもとめるならネイティブ

ご清聴ありがとうございました！GitHub:https://github.com/prprhyt/Convert_to_GrayScale-HTML5-JShttps://github.com/prprhyt/Convert_to_image-thresholding-HTML5-JShttps://github.com/prprhyt/MedianFilter-HTML5-JShttps://github.com/prprhyt/SobelFilter-HTML5-JS