画像のエッジ検出 📖

画像のエッジ（輪郭などの色が急激に変化している部分）を検出します。　縦エッジと横エッジ（隣の画素の色の差をもとめ、その差の大きい部分を黒く表示）と組み合わせて一つの画像を作ります。　　　　〈使い方〉　　１，画像の検出したい部分を、左上から右下までドラッグアンドドロップします。(１回のみ)　　　　２，ボタン「①エッジ検出」ボタンを押します。(この段階では何も起きません)　　　３，ボタン「②２枚プレス」を押します。(ここでも、まだ何も起きません)　　　４，ボタン「③描画」を押します。　　　　　　　これで、絵の輪郭が浮かび上がると思います。

プログラム: (→大)
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 仮エッジデータ１、２またはエッジデータは、透明度のみのデータとなります。１画素に付き、"０"か"１"。 色が滑らかに変化する画像などでは、感度が良すぎて黒くなります。絵などの輪郭を検出するのにはもってこいです！画像では、事前に色の階調(グラデーション)をおとす必要があるでしょう。 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/ V＝８０＃←エッジの検出度合い(感度)を変化できます。Vを小さくすると、感度は上がります。 a=0, b=0, 縦列=0, 横列=0 データ＝[] データ番号＝[] エッジデータ＝[] 仮エッジデータ１＝[] 仮エッジデータ２＝[] 番号１＝[] 番号２＝[] ●(xywhの|xywhを)色データ取得 　描画中コンテキストの「getImageData」をxywhでJSメソッド実行して、それ["data"]で戻る ここまで ●画像点画描画とは 色データ＝[] 　　Iを０から縦列まで繰り返す 　　 Nを０から横列まで繰り返す 　　 　　 「{I}@{N}」をデータ番号へ代入 　　 エッジデータ@データ番号を色データに代入 　　 ＃色データを表示 　　 「rgba({0},{0},{0},{色データ})」に線色設定 　　　　「rgba({0},{0},{0},{色データ})」に塗色設定 　　　　 　　 　　　　[-N*1+1000,-I*1+400]に0.5の円描画 　　　　 　　 ここまで 　　 ここまで 　　 ここまで ＃[0,0]へ「https://n3s.nadesi.com/image.php?f=223.png」を画像描画。 #[0,0]へ「https://n3s.nadesi.com/image.php?f=221.png」を画像描画。 ＃画像URN＝「https://n3s.nadesi.com/image.php?f=263.png」 ＃画像URN＝「https://n3s.nadesi.com/image.php?f=264.jpg」 ＃画像URN＝「https://n3s.nadesi.com/image.php?f=267.jpg」 画像URN＝「https://n3s.nadesi.com/image.php?f=378.png」 画像URNの[0,0,900,750]から[0,0,700,600]へ画像部分描画 #F=[0,512,5]の値指定バー作成。 描画中キャンバスをマウス押した時には、 　　マウスXをaに代入 　　マウスYをbに代入 ここまで 　　描画中キャンバスをマウス離した時には、 　　　　マウスX-aを横列に代入 　　　　マウスY-bを縦列に代入 　　　　Iを０から縦列まで繰り返す 　　　　　　　　Nを０から横列まで繰り返す 　　　　　　　　　[マウスX-N,マウスY-I,1,1]の色データ取得 　　　　　　　　　それを「,」で区切る 　　　　　　　　　 　　　　　　　Wに代入 　　　　　　Wの３を配列切り取り 　　　　　　それをKに代入　　　　　 　　　　　　K/250をｐに代入 　　　　　　 　　　　　　　　「{I*1}@{N}」をINに代入 　　　　　　　　INをｃに代入 　　　　　　　　IN＋0.5をｄに代入 　　　　　　　　データ@ｃ＝W 　　　　　　　　データ@ｄ＝ｐ 　　　　　　　　＃Wを表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 　　　　　　　　ここまで 　　　　　　ここまで 　　ここまで 「①エッジ記録（何も起きませんが、 ドラッグアンドドロップ後に押してください）」のボタン作成して記録に代入 改行作成。 「②２枚プレス（ここでも何も起きません。）」のボタン作成してプレスに代入 改行作成。 「③描画（やっと検出が表示されます。）」のボタン作成して提示に代入 改行作成。 ＃Fのテキスト取得してVに代入 記録をクリックした時には Iを０から縦列まで繰り返す　＃＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝横エッジ検出 　　Nを０から横列まで繰り返す 　　 　　 もし縦列＝Iでなければ 　　 　ぷちAデータ＝[] 　　 　ぷちBデータ＝[] 　　 　 　　 「{I*1}@{N}」を番号１に代入 　　 データ@番号１をぷちAデータに代入＃←１回目 　　 　 　　 　 「{I*1+1}@{N}」を番号２に代入 　　 　 データ@番号２をぷちBデータに代入＃←２回目 　　 JC＝０ 　　 　　 (ぷちAデータ@0-ぷちBデータ@0)^2をぷち１に代入 　　 　　 (ぷちBデータ@0-ぷちAデータ@0)^2をぷち２に代入 　　 　　 (ぷちAデータ@1-ぷちBデータ@1)^2をぷち３に代入 　　 　　 (ぷちBデータ@1-ぷちAデータ@1)^2をぷち４に代入 　　 　　 (ぷちAデータ@2-ぷちBデータ@2)^2をぷち５に代入 　　 　　 (ぷちBデータ@2-ぷちAデータ@2)^2をぷち６に代入 　　 　　 (ぷちAデータ@3-ぷちBデータ@3)^2をぷち７に代入 　　 　　 (ぷちBデータ@3-ぷちAデータ@3)^2をぷち８に代入 　　 　　 　　 もし(ぷち１>V)または(ぷち２>V)または(ぷち３>V)または(ぷち４>V)または(ぷち５>V)または(ぷち６>V)または(ぷち７>V)または(ぷち８>V)でなければ　　 　　 　　 　　　　 JCに０を代入 　　　　 「{I}@{N}」をデータ番号へ代入 　　　　　仮エッジデータ１@データ番号＝JC 　　 違えば 　　 　　 JCに１を代入 　　　　　　　「{I}@{N}」をデータ番号へ代入 　　　　　　　仮エッジデータ１@データ番号＝JC 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　 Iを０から縦列まで繰り返す　＃＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝縦エッジ検出 　　Nを０から横列まで繰り返す 　　 　　 もし横列＝Nでなければ 　　 　ぷちAデータ＝[] 　　 　ぷちBデータ＝[] 　　 　 　　 「{I*1}@{N}」を番号１に代入 　　 データ@番号１をぷちAデータに代入＃←１回目 　　 　 　　 　 「{I*1}@{N+1}」を番号２に代入 　　 　 データ@番号２をぷちBデータに代入＃←２回目 　　 JC＝０ 　　 　　 (ぷちAデータ@0-ぷちBデータ@0)^2をぷち１に代入 　　 　　 (ぷちBデータ@0-ぷちAデータ@0)^2をぷち２に代入 　　 　　 (ぷちAデータ@1-ぷちBデータ@1)^2をぷち３に代入 　　 　　 (ぷちBデータ@1-ぷちAデータ@1)^2をぷち４に代入 　　 　　 (ぷちAデータ@2-ぷちBデータ@2)^2をぷち５に代入 　　 　　 (ぷちBデータ@2-ぷちAデータ@2)^2をぷち６に代入 　　 　　 (ぷちAデータ@3-ぷちBデータ@3)^2をぷち７に代入 　　 　　 (ぷちBデータ@3-ぷちAデータ@3)^2をぷち８に代入 　　 　　 　　 もし(ぷち１>V)または(ぷち２>V)または(ぷち３>V)または(ぷち４>V)または(ぷち５>V)または(ぷち６>V)または(ぷち７>V)または(ぷち８>V)でなければ　　 　　 　　 　　　　 JCに０を代入 　　　　 「{I}@{N}」をデータ番号へ代入 　　　　　仮エッジデータ２@データ番号＝JC 　　 違えば 　　 　　 JCに１を代入 　　　　　　　「{I}@{N}」をデータ番号へ代入 　　　　　　　仮エッジデータ２@データ番号＝JC 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　　　　　　　　　 　　　　　　　ここまで 　　　　　　 プレスをクリックした時には＃←「２枚プレス」ボタンを押すと、２枚の 縦,横エッジを重ね合わせます。 Iを０から縦列まで繰り返す　 Nを０から横列まで繰り返す 「{I}@{N}」をデータ番号へ代入 仮エッジデータ１@データ番号をぷちAデータに代入 仮エッジデータ２@データ番号をぷちBデータに代入 もし(ぷちAデータ＝1)または(ぷちBデータ＝1)ならば エッジデータ@データ番号=1 違えば エッジデータ@データ番号=0 ここまで ここまで ここまで ここまで 提示をクリックした時には 全描画クリア 画像点画描画 ここまで ＃おわり