画像ローカルファイルを取得する時、描画するキャンバスについて
2024-05-23 16:03:17
画像ローカルファイルを取得する時、描画するキャンバスについて
突然失礼します。 https://n3s.nadesi.com/plain/nadesiko3-FileReader.js を取り込み、ローカルファイルの画像を取得し、画像処理に使っています。 ここで読み取った画像データをキャンバスに描き、そのデータを使って画像処理を行いたいです。 けれど、もともと用意されているキャンバスのマウスの座標は受け取れますが、putImagedetaが行えません。 もう一つ追加したキャンバスだと描画はできますが、マウスの座標が受け取れません。 どちらかのキャンバスでいいので、座標の取得とputImagedetaの両方行えるようにできないでしょうか。 以下がプログラムの全文です。一応 ■https://n3s.nadesi.com/index.php?page=2794&action=show■にて、プログラムを公開しています。 よろしくお願いします。 !「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。 WINDOWへドロップ禁止。 #----------------------------------------------------------------------- 操作キャンバスx＝300 操作キャンバスy＝0 画像データマップ横＝0 画像データマップ縦＝0 キャンバス比横＝0 キャンバス比縦＝0 処理範囲=[] A=0 変化A=[] 色データ＝[] ベタ塗りデータ=[] マップ1=[] ＃ 画像 DOM親要素に「 「☆画像ファイルを選択してください。または、キャンバスにドロップしてください。」のラベル作成。改行作成。 ファイル選択作成して画像ファイル選択に代入。 画像ファイル選択の「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 })』を[xywh,色データ,描画中コンテキスト]でJS関数実行。 ここまで。 //標準値は(0-255)。二値化。 ●(標準値で)画像モノクロ もし、標準値＜０ならば、標準値＝０。 もし、標準値＞２５５ならば、標準値＝２５５。 処理範囲=[0,0,画像データマップ横,画像データマップ縦] 色データ=処理範囲の色データ取得。 ＃色データを表示 (画像データマップ横*画像データマップ縦)を画素数に代入 カウンタを0から(画素数-1)まで繰り返す 色平均とは変数＝(色データ[カウンタ*4] + 色データ[カウンタ*4+1] + 色データ[カウンタ*4+2])/3。 ＃色平均を表示 もし、標準値＜色平均ならば、 マップ１[カウンタ]＝1。 違えば、 マップ１[カウンタ]＝0。 ここまで ここまで ここまで ＃範囲制作 a=0, b=0, 縦列=0, 横列=0 スタック=[] データ＝[] ＃色選択ボックス作成して色選択に代入。 R=[0,255,150]の値指定バー作成。改行作成。 G=[0,255,150]の値指定バー作成。改行作成。 B=[0,255,150]の値指定バー作成。改行作成。 T=[0,255,150]の値指定バー作成。改行作成。 「スタート」のボタン作成してスタートに代入。 スタートをクリックした時には、 220で画像モノクロ。 ここまで 描画中キャンバスをマウス押した時には、 マウスX*キャンバス比横の整数部分を点マウスXに代入 マウスY*キャンバス比縦の整数部分を点マウスYに代入 マウス＝[点マウスX,点マウスY] 😀「マウス：{マウス}」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 🎈「マウス：{マウス}」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ スタックにマウスを配列プッシュ ＃ ←これで「！１」文を１回目通れる。代入したのは勝手に消費してくれるだろう マップ２=[] #←問題 要素がが画素分必要か？ (スタックの要素数!=0)かつ(スタックの要素数!=1)の間 [マウス[0],マウス[1],1,1]の色データ取得して現在地カラーに代入 ＃今の位置の色を取得 マウス[0]+(マウス[1]*画像データマップ横)を現在地に代入 ＃今の位置のマップ形式の位置 もし、マップ1[現在地]=0でなければ 😀 ＃＃ 0.005秒待つ 🎈 ＃＃ 0.005秒待つ [マウス[0],マウス[1],1,1]を色データ取得してベタ色に代入 ＃ ←あらかじめ取得しないといけないそう、、、 赤=Rのテキスト取得 緑=Gのテキスト取得 青=Bのテキスト取得 透明度=Tのテキスト取得 ベタ色=[赤,緑,青,透明度] [マウス[0],マウス[1],1,1]をベタ色で画像処理反映 ＃現在地を塗る 😀マップ２[現在地]=1 ＃＃現在地のマップ２を塗る 🎈マップ２[現在地]=1 ＃＃現在地のマップ２を塗る ここまで 😀右フラグ=オフ ＃＃初期化します。 🎈右フラグ=オフ ＃＃初期化します。 左フラグ=オフ 下フラグ=オフ 上フラグ=オフ マップ１[現在地+1]を右ビットに代入 マップ２[現在地+1]を右ベタに代入 もし、右ビット!=0かつ右ベタ!=1ならば 右フラグ=オン ここまで マップ１[現在地-1]を左ビットに代入 マップ２[現在地-1]を左ベタに代入 もし、左ビット!=0かつ左ベタ!=1ならば もし、右フラグ=オンならば [マウス[0]-1,マウス[1]]をスタックに配列プッシュ 違えば 左フラグ=オン ここまで 違えば ここまで マップ１[現在地+画像データマップ横]を下ビットに代入 マップ２[現在地+画像データマップ横]を下ベタに代入 もし、下ビット!=0かつ下ベタ!=1ならば もし、右フラグ=オンまたは左フラグ=オンならば [マウス[0],マウス[1]+1]をスタックに配列プッシュ 違えば 下フラグ=オン ここまで 違えば ここまで マップ１[現在地-画像データマップ横]を上ビットに代入 マップ２[現在地-画像データマップ横]を上ベタに代入 もし、上ビット=!0かつ上ベタ!=1ならば もし、右フラグ=オンまたは左フラグ=オンまたは下フラグ=オンならば [マウス[0],マウス[1]-1]をスタックに配列プッシュ 違えば 上フラグ=オン ここまで 違えば ここまで もし右フラグ=オンならば マウス=[マウス[0]+1,マウス[1]] ここまで もし左フラグ=オンならば マウス=[マウス[0]-1,マウス[1]] ここまで もし下フラグ=オンならば マウス=[マウス[0],マウス[1]+1] ここまで もし上フラグ=オンならば マウス=[マウス[0],マウス[1]-1] ここまで もし、右フラグ=オフかつ左フラグ=オフかつ下フラグ=オフかつ上フラグ=オフならば ＃フラグが立ってないなら、スタックに移る スタックの0を配列削除 スタック[0]をマウスに代入 ここまで 😀＃「スタック要素数：｛スタックの要素数｝」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 🎈＃「スタック要素数：｛スタックの要素数｝」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃ここまで ＃ ←現在地のときの「もし」文から 😀＃「現在地カラー：｛現在地カラー｝」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 🎈＃「現在地カラー：｛現在地カラー｝」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 😀＃「フラグ：{右フラグ}、{左フラグ}、{下フラグ}、{上フラグ}」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 🎈＃「フラグ：{右フラグ}、{左フラグ}、{下フラグ}、{上フラグ}」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃スタックを表示 ここまで # ←「の間」から 😀＃「スタックの要素数」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 🎈＃「スタックの要素数」を表示＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ここまで ＃ ←「マウス押した時には」から |
1898
Re②:画像ローカルファイルを取得する時、描画するキャンバスについて
(24-05-25)
1889
Re①:画像ローカルファイルを取得する時、描画するキャンバスについて
(24-05-24)