Download - 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