HTML5 + JSで楽しい画像処理
-
Upload
prprhyt -
Category
Engineering
-
view
1.598 -
download
1
Transcript of HTML5 + JSで楽しい画像処理
![Page 1: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/1.jpg)
HTML5 + JS で楽しい画像処理@prprhyt
![Page 2: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/2.jpg)
自己紹介•@prprhyt•所属 : 通信ネットワーク工学科 1 年情報通信研究プロジェクト放送研究会日本 Android の会 学生部•Loves:HTML5 Android Windows
![Page 3: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/3.jpg)
cle_analysis 前回は・・・
![Page 4: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/4.jpg)
今日のお話HTML5 と Javascript で画像処理の入門にチャレンジしたお話
![Page 5: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/5.jpg)
なぜHTML5と JS?・入力画像のファイル形式をほとんど気にする必要が無い。・メインの処理を書くことに集中できる。
![Page 6: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/6.jpg)
デメリット•1 スレッドでの処理なのでマシンパワーを生かせない•そもそも、 Javascript エンジンで実行したコードはネイティブより遅い
![Page 7: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/7.jpg)
動機
![Page 8: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/8.jpg)
•情メの授業で画像処理を扱っているらしい ( 風のうわさ )→ 面白そう
![Page 9: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/9.jpg)
まず、グレースケール化Math.floor( 0.298912 * bRed + 0.586611 * bGreen + 0.114478 * bBlue );
![Page 10: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/10.jpg)
次に二値化
![Page 11: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/11.jpg)
拡大すると
ノイズがいっぱい^^;
![Page 12: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/12.jpg)
ノイズの除去 ( メディアンフィルタ )
![Page 13: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/13.jpg)
拡大すると
葉の周りがキレイになった
![Page 14: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/14.jpg)
輪郭抽出 (4 方向ソーベルフィルタ )
![Page 15: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/15.jpg)
以上
![Page 16: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/16.jpg)
本当は・・・
元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用
![Page 17: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/17.jpg)
本当は・・・窓ロゴを検出
( したかった )
元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用
![Page 18: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/18.jpg)
本当は・・・
元画像 :https://mag.kakaku.com/pc-smartphone/?id=3230 より引用
( 見せられないよー )
![Page 19: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/19.jpg)
まとめ矩形の検出をするには→ ハフ( Hough )変換 ?速度をもとめるならネイティブ
![Page 20: HTML5 + JSで楽しい画像処理](https://reader036.fdocuments.net/reader036/viewer/2022081507/58896ef71a28ab44758b610d/html5/thumbnails/20.jpg)
ご清聴ありがとうございました!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