画像をアップロードして、黒色抽出。 📖

画像の指定された範囲の黒い部分を抽出します。　　　　〈使い方〉　　　１、画像ファイルをアップロードしてください。　　　２、小さい方の画像をドラッグアンドドロップして、範囲を設定します。(できるだけ小さな範囲のほうが時間が短く編集できます)　　　３、「描画」ボタンをクリックしてください。(表示されます)

プログラム: (→大)
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。 WINDOWへドロップ禁止。 #----------------------------------------------------------------------- 操作キャンバスx＝500 操作キャンバスy＝0 画像データマップ横＝0 画像データマップ縦＝0 キャンバス比横＝0 キャンバス比縦＝0 処理範囲=[] ＃ 画像 DOM親要素に「<IMG id="result"></IMG>」をHTML設定。改行作成。＃←参照https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E8%A6%81%E7%B4%A0ID%E5%8F%96%E5%BE%97&show 「☆画像ファイルを選択してください。または、キャンバスにドロップしてください。」のラベル作成。改行作成。 ファイル選択作成して画像ファイル選択に代入。 　画像ファイル選択の「accept」に『image/*』をDOM属性設定。　//固有ファイル型指定子*/ //　画像ファイル選択の「multiple」に、はいをDOM属性設定。　 //複数選択出来るようにする 　画像ファイル選択の「change」に、「選択画像取得」をDOMイベント追加。 改行作成。改行作成。 「#nako3_canvas」にファイルドロップした時には、 　　画像ファイル選択["files"]＝対象。 　　選択画像取得。 ここまで。 ●選択画像取得 　選択ファイルリスト＝画像ファイル選択["files"]。 　ファイル＝選択ファイルリスト[0] 　「名前：{ファイル["name"]}」を表示　//ファイル名（パス無し） 　「サイズ：｛ファイル["size"]｝」を表示　//ファイルサイズ（バイト） 　「拡張子：｛ファイル["type"]｝」を表示　//ファイルタイプ（image/jpegとか） 　＃ファイル["height"]を表示 　＃ファイル["width"]を表示 　ファイルの画像ファイル開いた時には 　　　　img＝対象。 　　#「#result」の「src」にimg["src"]をDOM属性設定。 #←ここを消すと大きな画像なくなりキャンバス表示のみとなる！！（https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E5%B1%9E%E6%80%A7%E8%A8%AD%E5%AE%9A&show　参照） 　　　　操作キャンバスy＝img["height"]/(img["width"]/操作キャンバスx) 　 「高さ：{img["height"]｝」を表示　　＃←追加した。 　　　　「幅：｛img["width"]｝」を表示 　　　　＃img["src"]を表示　　　＃←これをやると意味不明のデータ取得 　　　　img["height"]を画像データマップ縦に代入 　　　　img["width"]を画像データマップ横に代入 　　　　 　　　　[0,0,操作キャンバスx,操作キャンバスy]にimgを画像描画。 　　　　 　　　　 　　　　[画像データマップ横,画像データマップ縦]のキャンバス作成 　　　　[0,0]にimgを画像描画 　　　　 　　　　画像データマップ横/操作キャンバスxをキャンバス比横に代入 　　　　画像データマップ縦/操作キャンバスyをキャンバス比縦に代入 　　　　 　ここまで。 ここまで。 /*============================================================== ここから 画像CSV化―編集プログラム -------------------------------------------------------------- ===============================================================*/ 改行作成。 改行作成。 ●(xywhの|xywhを)色データ取得 　描画中コンテキストの「getImageData」をxywhでJSメソッド実行して、それ["data"]で戻る。 ここまで。 　　　　 ●(xywhを色データで|xywhに)画像処理反映 『(function (xywh,color,ctx){ const [x,y,w,h]=xywh; const img = ctx.getImageData(x,y,w,h); let data = img.data; for (let i=0; i<data.length;i++){data[i]=color[i]} ctx.putImageData(img,x,y); })』を[xywh,色データ,描画中コンテキスト]でJS関数実行。 ここまで。 //閾値は(0-255)。二値化。 ●(標準値でxywhを)画像モノクロ 　もし、標準値＜０ならば、標準値＝０。 　もし、標準値＞２５５ならば、標準値＝２５５。 　色データとは変数＝xywhの色データ取得。 　 　画素数とは変数＝(色データの要素数)/4 　カウンタを0から画素数-1まで繰り返す 　 Cとは変数＝カウンタ*4。 　　　色平均とは変数＝(色データ[C] + 色データ[C+1] + 色データ[C+2])/3。 　　　もし、標準値＜色平均ならば、 　　　　3回。色データ[C+回数-1]＝255。ここまで。 　　　違えば、 　　　　3回。色データ[C+回数-1]＝0。ここまで。 　　　ここまで。 　　　 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 a=0, b=0, 縦列=0, 横列=0 データ＝[] F=[0,750,375]の値指定バー作成。 「描画」のボタン作成して提示に代入 描画中キャンバスをマウス押した時には、 　　マウスXをaに代入 　　マウスYをbに代入 　　ここまで 　　描画中キャンバスをマウス離した時には、 　　　　マウスX-aを仮横列に代入 　　　　マウスY-bを仮縦列に代入 　　　　 　　　　仮横列*キャンバス比横を横列に代入 　　　　仮縦列*キャンバス比縦を縦列に代入 　　　　 　　　　処理範囲=[a*キャンバス比縦,b*キャンバス比縦,横列,縦列] ＃ここから独自プログラム #全描画クリア 　　提示をクリックした時には 　　 150で処理範囲を画像モノクロ。 　　ここまで ここまで