画像　小窓操作 📖

小さな窓をドラッグアンドドロップすると、範囲内の絵の黒い部分が抽出される。

プログラム: (→大)
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。 WINDOWへドロップ禁止。 #----------------------------------------------------------------------- 操作キャンバスx＝500 操作キャンバスy＝0 画像データマップ横＝0 画像データマップ縦＝0 キャンバス比横＝0 キャンバス比縦＝0 フラグX＝１ ＃ 画像 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"]｝（bit）」を表示　//ファイルサイズ（バイト） 　「種類：｛ファイル["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"]で戻る ここまで a=0, b=0, 縦列=0, 横列=0 データ＝[] F=[0,750,375]の値指定バー作成。 描画中キャンバスをマウス押した時には、 　　マウスXをaに代入 　　マウスYをbに代入 ここまで 　　描画中キャンバスをマウス離した時には、 　　　　マウスX-aを仮横列に代入 　　　　マウスY-bを仮縦列に代入 　　　　 　　　　仮横列*キャンバス比横を横列に代入 　　　　仮縦列*キャンバス比縦を縦列に代入＃　←ここで 小窓 と 大きい窓 の位置合わせ。 　　　　 　　　　実況ラベル１に「　　　少しまってね。」をテキスト設定 　　　　0.1秒待つ。 ＃ここから独自プログラム 　　　　Iを0から縦列まで繰り返す 　　　　　Nを0から横列まで繰り返す 　　　　　[マウスX*キャンバス比横-N,マウスY*キャンバス比縦-I,1,1]の色データ取得　＃←色データを大きい窓から拾ってく。 　　　　　それを「,」で区切る 　　　　　　　　　 　　　　　　　Wに代入 　　　　　　Wの３を配列切り取り 　　　　　　それをKに代入　　　　　 　　　　　　K/250をｐに代入 　　　　　　#「rgba({W},{p})」に線色設定 　　　　　　#「rgba({W},{p})」に塗色設定 　　　　　　#[-N*３+800,-I*３+800]に２の円描画 　　　　　　　　「{I*1}@{N}」をINに代入 　　　　　　　　INをｃに代入 　　　　　　　　IN＋0.5をｄに代入 　　　　　　　　データ@ｃ＝W 　　　　　　　　データ@ｄ＝ｐ 　　　　　　　　ここまで 　　　　　　ここまで 　　　　　#　データを表示 　　　　　実況ラベル１に「　　完了！！！」をテキスト設定 　　　　　2秒待つ 　　　　　実況ラベル１に「　　」をテキスト設定 ＃独自プログラム（終わり） ここまで。 「描画」のボタン作成して提示に代入 実況ラベル２＝ラベル作成して「　　　＊＊＊」をテキスト設定 提示をクリックした時には、 o=0 Fのテキスト取得してoに代入 ２回繰り返す 実況ラベル２に「　　　ちょっと 待ってて、」をテキスト設定 1秒待つ 実況ラベル２に「　　　ちょっと 待ってて、、」をテキスト設定 1秒待つ 実況ラベル２に「　　　ちょっと 待ってて、、、」をテキスト設定 1秒待つ ここまで 0.1秒待つ。＃＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜ 全描画クリア ＃[1000,1000]のキャンバス作成＃して描画中キャンバスに代入 Iを0から縦列まで繰り返す 　　Nを0から横列まで繰り返す 　　 「{I*1}@{N}」をINに代入 　　 　　 INをGに代入 　　 IN＋0.5をHに代入 　　 データ@HをJに代入 　　 ぷちデータ＝[] 　　 データ@Gをぷちデータに代入 　　 ぷちデータ@0+ぷちデータ@1+ぷちデータ@2をMに代入 　　 データJ＝[] 　　 もしM＜oならば　＃← oは、値指定バーの値。ここで黒か白か判断してる 　　 Jに１を代入 　　 データIに[0,0,0]を代入 　　 違えばJに０を代入、データJにデータ@Gを代入 　　 「rgba({データI},{J})」に線色設定 　　　　「rgba({データI},{J})」に塗色設定 　　　　[-N*1+横列,-I*1+縦列]に0.5の円描画 　　　　＃データ@Gを表示 　　ここまで ここまで 実況ラベル２に「　　　完了！！！」をテキスト設定 フラグXに０を代入 0.7秒待つ。 実況ラベル２に「　　　完了！！！　　指定範囲のデータを 取得(操作)できました。」をテキスト設定 2.7秒待つ。 実況ラベル２に「　　　」をテキスト設定 ここまで