日本語プログラミング言語なでしこ公式掲示板

①画像描画は非同期で、実際に画像が読み込まれる前に次の命令が走ります。
　画像が読み込まれる前に色データ取得していることになってしまっていて、色データの中身が全部0になっています。
　これまでは、マウスで範囲指定して取得していたから大丈夫だったんです。

　そこで「画像読待」とゆう命令があります。
https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E7%94%BB%E5%83%8F%E8%AA%AD%E5%BE%85&show

　これは、画像を読んで、読み込み完了を待つという命令です。
　読み込まれたイメージオブジェクトを画像描画してあげればＯＫです。
　なお、イメージオブジェクトは何らかの変数に入れて取っておくと、元画像を再度描画したいという場合にいちいちURLから読まなくて良いのでオススメです✨

②関数の方を書き換えられたんですね。
　{}は、文字列中に変数を埋め込むための記号ですので、直接数値の10を指定したいのであれば、{}は不要ですよ。別に括ってあっても動くことは動くみたいですが。てゆうか元の関数ちょっと変えた～😅
　そして、0,0から取った画像を10,10にずらして描画したいということですよね？
　であれば、画像処理反映に渡すxywhのxy部分にソレを指定すればＯＫなんです。

#-----------------------
色データ=[]
処理範囲=[0,0,300,250]
IM＝「https://n3s.nadesi.com/image.php?f=263.png」を画像読み待つ。
[0,0]へIMを画像描画。

色データ＝処理範囲の色データ取得。
[10,10,300,250]を色データで画像処理反映。

●(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関数実行。
ここまで。
#-----------------------