画像処理をするプラグイン 📖

画像処理をするNAKO3プラグイン。あるいは描画ダウンロードのテスト。／v3.3.31以降？ sys__ctxがJS関数実行の中で直接参照出来なくなっていたのでお直し

プログラム: (→大)
#----------------------------------------------- ＃画像処理 #----------------------------------------------- //三色の平均取った価を三色全部に代入する。 ●(xywhを)画像グレイスケール 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　色平均とは変数＝(色データ[C] + 色データ[C+1] + 色データ[C+2])/3。 　　　3回。色データ[C+回数-1]＝色平均。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //セピアという名称ですが、グレイスケール化したものに特定の色でフィルタ掛ける感じ。 //セピア調になるのは「#FFCC99」あたり？　Bの価を下げるともっと黄ばんだ感じが出る。 //rgbは[R,G,B]または「#RRGGBB」 ●(rgbでxywhを)画像セピア 　もし、（rgbの1だけ文字左部分）＝「#」ならば、rgb＝rgbのRGB分解。 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　色平均とは変数＝(色データ[C] + 色データ[C+1] + 色データ[C+2])/3。 　　　3回。色データ[C+回数-1]＝色平均*rgb[回数-1]/255。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //閾値は(0-255)。二値化。 ●(閾値でxywhを)画像モノクロ 　もし、閾値＜０ならば、閾値＝０。 　もし、閾値＞２５５ならば、閾値＝２５５。 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　色平均とは変数＝(色データ[C] + 色データ[C+1] + 色データ[C+2])/3。 　　　もし、閾値＜色平均ならば、 　　　　3回。色データ[C+回数-1]＝255。ここまで。 　　　違えば、 　　　　3回。色データ[C+回数-1]＝0。ここまで。 　　　ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //反転 ●(xywhを)画像ネガポジ 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　３回。色データ[C+回数-1]＝255-色データ[C+回数-1]。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //ガンマ値は実数。１が標準で、1より大きな値にすると明るくなり、0に近付くほど暗くなる。 //ｖ１のガンマ補正のレベルAは違うようで、1/γの価なのかとも思うが、よくわからない。 //補正式：255*(色/255)^(1/γ) ●(ガンマ値でxywhを)画像ガンマ補正 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　３回。色データ[C+回数-1]＝255*(色データ[C+回数-1]/255)^(1/ガンマ値)。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //ユークリッド距離を用いて隣接した点の色が遠ければ境界として黒色、 //その他を白色とすることで輪郭を抽出する。 ●(閾値でxywhの)画像輪郭抽出 w＝xywh[2]。 色データ＝xywhの色データ取得。 (色データの要素数)/4回 Cとは変数＝(回数-1)*4。 もし、(C/4+1)%w＝0ならば、 ３回。色データ[C+回数-1]＝255。ここまで。 続ける。 ここまで。 Rとは変数＝C+4。# 右 Uとは変数＝C+w*4。# 下 主色＝[色データ[C],色データ[C+1],色データ[C+2]]。 右色＝[色データ[R],色データ[R+1],色データ[R+2]]。 下色＝[色データ[U],色データ[U+1],色データ[U+2]]。 もし、((主色と右色のユークリッド距離)＞閾値)または((主色と下色のユークリッド距離)＞閾値)ならば、 ３回。色データ[C+回数-1]＝0。ここまで。 違えば、 ３回。色データ[C+回数-1]＝255。ここまで。 ここまで。 ここまで。 xywhを色データで画像処理反映。 ここまで。 # Aはモザイクの大きさ（ピクセル） ●(xywhをAの)画像モザイク 　変数[画像x,画像y,画像幅,画像高さ]＝xywh。 　色データとは変数＝xywhの色データ取得。 　#モザイクのサイズ（ピクセル）で繰り返す 　画像高さ/Aを切り上げ回 　　y＝(回数-1)*A。 　　画像幅/Aを切り上げ回 　　　x＝(回数-1)*A。 　　　#はみ出し処理 　　　m幅＝A。m高＝A。 　　　もし、x＋A＞画像幅ならば、m幅＝画像幅-x。 　　　もし、y＋A＞画像高さならば、m高＝画像高さ-y。 　　　mドット数＝m幅*m高。 　　　#モザイク内の点の色の平均を計算する 　　　色平均＝[0,0,0]。 　　　C＝(x+y*画像幅)*4。 　　　m高回 　　　　m幅回 　　　　　３回。色平均[回数-1]＝色平均[回数-1]＋色データ[C+回数-1]。ここまで。 　　　　　Cを4増やす。 　　　　ここまで。 　　　　C＝C+4*(画像幅-m幅) 　　　ここまで。 　　　３回。色平均[回数-1]＝色平均[回数-1]/mドット数を切り捨て。ここまで。 　　　# その色で塗る 　　　C＝(x+y*画像幅)*4。 　　　m高回 　　　　m幅回 　　　　　３回。色データ[C+回数-1]＝色平均[回数-1]。ここまで。 　　　　　Cを4増やす 　　　　ここまで。 　　　　C＝C+4*(画像幅-m幅) 　　　ここまで。 　　ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 #----------------------------------------------- ＃点取得と点描画 #----------------------------------------------- //[R,G,B,A]を返す ●(xyの|xyを)点取得 　[xy[0],xy[1],1,1]の色データ取得して戻る。 ここまで。 ●(xyから|xyを)画像色取得 　xyの点取得。 ここまで。 ●(xyへrgbを)点描画 　もし、（rgbの1だけ文字左部分）＝「#」ならば、rgb＝rgbのRGB分解。 　cxとは変数＝描画中キャンバスの「width」をDOM属性取得。 　cyとは変数＝描画中キャンバスの「height」をDOM属性取得。 　色データとは変数＝[0,0,cx,cy]の色データ取得。 　点とは変数＝(xy[0]+xy[1]*cx)*4。 　３回。色データ[点+(回数-1)]＝rgb[0+(回数-1)]。ここまで。 　[0,0,cx,cy]を色データで画像処理反映。 ここまで。 #----------------------------------------------- ＃明度、色相、彩度 #----------------------------------------------- //レベルは(-100から100)。ｖ１とは引数が違います。 ●(レベルでxywhを)画像明度補正 　色データとは変数＝xywhの色データ取得。 　補正値とは変数。 　もし、((レベルの符号)＝-1)ならば、補正値＝「#000000」。 　違えば、補正値＝「#FFFFFF」 　レベルはレベルの絶対値。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　結果とは変数＝レベルで[[色データ[C]],[色データ[C+1]],[色データ[C+2]]]と補正値の混色計算。 　　　3回。色データ[C+回数-1]＝結果[回数-1]。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //レベルは(-100から100)。ｖ１には無い。 ●(レベルでxywhを)画像彩度補正 　色データとは変数＝xywhの色データ取得。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　HSL色とは変数＝[色データ[C],色データ[C+1],色データ[C+2]]をHSL変換。 　　　HSL色[1]＝HSL色[1]+レベル。 　　　もし、HSL色[1]＞100ならば、HSL色[1]＝100。 　　　もし、HSL色[1]＜0ならば、HSL色[1]＝0。 　　　RGB色とは変数＝HSL色をRGB変換。 　　　3回。色データ[C+回数-1]＝RGB色[回数-1]。ここまで。 　ここまで。 　xywhを色データで画像処理反映。 ここまで。 //レベルは(-180から180)。ｖ１には無い。 ●(レベルでxywhを)画像色相補正 　色データとは変数＝xywhの色データ取得。 　もし、(レベル＜-180)ならば、レベル＝-180。 　もし、(レベル＞180)ならば、レベル＝180。 　(色データの要素数)/4回 　　　Cとは変数＝(回数-1)*4。 　　　HSL色とは変数＝[色データ[C],色データ[C+1],色データ[C+2]]をHSL変換。 　　　HSL色[0]＝HSL色[0]+レベル。 　　　もし、(HSL色[0]＜0)ならば、HSL色[0]＝HSL色[0]+360。 　　　もし、(HSL色[0]≧360)ならば、HSL色[0]＝HSL色[0]-360。 　　　RGB色とは変数＝HSL色をRGB変換。 　　　3回。色データ[C+回数-1]＝RGB色[回数-1]。ここまで。 　　ここまで。 　xywhを色データで画像処理反映。 ここまで。 #----------------------------------------------- ＃グラデーションの計算 #----------------------------------------------- # 混色（色等比計算） //色1、色2は、[R,G,B]または「#RRGGBB」。 //Aは[A,W]と配列にすることでグラデーションの幅を指定出来るようにしました。 //Aが大きいほど色2に近付く。(A=0～100、または0～W。0=色1、100=色2となる) ●(Aで色1と色2の)混色計算 　　変数 W＝100。 　　もし、(Aの変数型確認)＝「object」ならば、A,W＝A。 　　Rとは変数。Gとは変数。Bとは変数。R1とは変数。G1とは変数。B1とは変数。R2とは変数。G2とは変数。B2とは変数。 　　もし、(色1の1だけ文字左部分)＝「#」ならば、色1＝色1のRGB分解。 　　R1=色1[0]。G1=色1[1]。B1=色1[2] 　　もし、(色2の1だけ文字左部分)＝「#」ならば、色2＝色2のRGB分解。 　　R2=色2[0]。G2=色2[1]。B2=色2[2]。 　　R=(R2-R1)*A/W+R1を整数変換。 　　G=(G2-G1)*A/W+G1を整数変換。 　　B=(B2-B1)*A/W+B1を整数変換。 　　[R,G,B]で戻る。 ここまで。 ●(Aで色1と色2の|色1から)色等比計算 　Aで色1と色2の混色計算。 ここまで。 # 色等差計算 //元色は、[R,G,B]または「#RRGGBB」。 //Aが小さいと濃く、大きいと明るくなる。(A=0～100。50=元色となる) //元色が暗かったり明るかったりすると、0に近い値が黒になったり100に近い値が白になったりする。 //MaxがFFかつMinが00になる色は、全部同じ色になってグラデーションにならない。 ●(Aで元色の)色等差計算 　　Maxとは変数。Minとは変数。Rとは変数。Gとは変数。Bとは変数。R1とは変数。G1とは変数。B1とは変数。 　　もし、(元色の1だけ文字左部分)＝「#」ならば、元色＝元色のRGB分解。 　　R1=元色[0]。G1=元色[1]。B1=元色[2]。 　　Max＝元色の配列最大値。Min＝元色の配列最小値。 　　R=(255-Max+Min)*(A-50)/100+R1を整数変換。 　　G=(255-Max+Min)*(A-50)/100+G1を整数変換。 　　B=(255-Max+Min)*(A-50)/100+B1を整数変換。 　　もし、R＞255ならば、R=255。もし、R＜0ならば、R=0。 　　もし、G＞255ならば、G=255。もし、G＜0ならば、G=0。 　　もし、B＞255ならば、B=255。もし、B＜0ならば、B=0。 　　[R,G,B]で戻る。 ここまで。 #----------------------------------------------- #反転色と補色 #----------------------------------------------- //色は、[R,G,B]または「#RRGGBB」。 ●(色の)反転色計算 　　Rとは変数。Gとは変数。Bとは変数。 　　もし、(色の1だけ文字左部分)＝「#」ならば、色＝色のRGB分解。 　　R=色[0]。G=色[1]。B=色[2]。 　　[255-R,255-G,255-B]で戻る。 ここまで。 //色は、[R,G,B]または「#RRGGBB」。 ●(色の)補色計算 　　Maxとは変数。Minとは変数。Rとは変数。Gとは変数。Bとは変数。R1とは変数。G1とは変数。B1とは変数。 　　もし、(色の1だけ文字左部分)＝「#」ならば、色＝色のRGB分解。 　　R1=色[0]。G1=色[1]。B1=色[2]。 　　Max＝色の配列最大値。Min＝色の配列最小値。 　　R=Max+Min-R1。G=Max+Min-G1。B=Max+Min-B1。 　　[R,G,B]で戻る。 ここまで。 #----------------------------------------------- #色差の計算式 # (Max(R1,R2)-Min(R1,R2))+(Max(G1,G2)-Min(G1,G2))+(Max(B1,B2)-Min(B1,B2)) #----------------------------------------------- //色1、色2は、[R,G,B]または「#RRGGBB」。 ●(色1と色2の)色差計算 　　色とは変数。Maxとは変数。Minとは変数。Max＝空配列。Min＝空配列。 　　もし、(色1の1だけ文字左部分)＝「#」ならば、色1＝色1のRGB分解。 　　もし、(色2の1だけ文字左部分)＝「#」ならば、色2＝色2のRGB分解。 　　３回 　　　　色＝「{色1[回数-1]},{色2[回数-1]}」を「,」で区切る。 　　　　Max[回数-1]＝色の配列最大値。 　　　　Min[回数-1]＝色の配列最小値。 　　ここまで。 　　(Max[0]-Min[0])+(Max[1]-Min[1])+(Max[2]-Min[2])で戻る。 ここまで。 #----------------------------------------------- #ユークリッド距離 # SQRT((R1-R2)^2+(G1-G2)^2+(B1-B2)^2) #----------------------------------------------- //色1、色2は、[R,G,B]または「#RRGGBB」。 ●(色1と色2の)ユークリッド距離 　　R1とは変数。G1とは変数。B1とは変数。R2とは変数。G2とは変数。B2とは変数。 　　もし、(色1の1だけ文字左部分)＝「#」ならば、色1＝色1のRGB分解。 　　R1=色1[0]。G1=色1[1]。B1=色1[2]。 　　もし、(色2の1だけ文字左部分)＝「#」ならば、色2＝色2のRGB分解。 　　R2=色2[0]。G2=色2[1]。B2=色2[2]。 　　SQRT((R1-R2)^2+(G1-G2)^2+(B1-B2)^2)を四捨五入で戻る ここまで。 #----------------------------------------------- ＃RGB⇔HSL #----------------------------------------------- # RGB[R,G,B]→HSL[H,S,L] ●(rgbを)HSL変換 　　Hとは変数。Sとは変数。Lとは変数。 　　Rとは変数＝rgb[0]。Gとは変数＝rgb[1]。Bとは変数＝rgb[2]。 　　Maxとは変数＝rgbの配列最大値。Minとは変数＝rgbの配列最小値。 　　もし、(R=G)かつ(G=B)ならば、H=0。 　　違えば、もし、Max＝Rならば、H=60*((G-B)/(Max-Min))。 　　違えば、もし、Max＝Gならば、H=60*((B-R)/(Max-Min))+120。 　　違えば、もし、Max＝Bならば、H=60*((R-G)/(Max-Min))+240。 　　もし、H＜0ならば、H=H+360。 　　H=Hを四捨五入。 　　L=(Max+Min)/2。 　　もし、(Max=Min)ならば、S=0。 　　違えば、もし、L＜128ならば、S=(Max-Min)/(Max+Min) 　　違えば、S=(Max-Min)/(510-Max-Min) 　　S=S*100を1で小数点四捨五入。 　　L=L/255*100を1で小数点四捨五入。 　　[H,S,L]で戻る。 ここまで。 # HSL[H,S,L]→RGB[R,G,B] ●(hslを)RGB変換 　　Rとは変数。Gとは変数。Bとは変数。Maxとは変数。Minとは変数。 　　Hとは変数＝hsl[0]。Sとは変数＝hsl[1]。Lとは変数＝hsl[2]。 　　もし、L＜50ならば、 　　　　Max=2.55*(L+L*(S/100))。Min=2.55*(L-L*(S/100)) 　　違えば、 　　　　Max=2.55*(L+(100-L)*(S/100))。Min=2.55*(L-(100-L)*(S/100)) 　　ここまで。 　　もし、(0≦H）かつ（H＜60）ならば、 　　　R=Max。G=(H/60)*(Max-Min)+Min。B=Min。 　　違えば、もし、(60≦H）かつ（H＜120）ならば、 　　　R=((120-H)/60)*(Max-Min)+Min。G=Max。B=Min。 　　違えば、もし、(120≦H）かつ（H＜180）ならば、 　　　R=Min。G=Max。B=((H-120)/60)*(Max-Min)+Min。 　　違えば、もし、(180≦H）かつ（H＜240）ならば、 　　　R=Min。G=((240-H)/60)*(Max-Min)+Min。B=Max。 　　違えば、もし、(240≦H）かつ（H＜300）ならば、 　　　R=((H-240)/60)*(Max-Min)+Min。G=Min。B=Max。 　　違えば、もし、(300≦H）かつ（H＜360）ならば、 　　　R=Max。G=Min。B=((360-H)/60)*(Max-Min)+Min。 　　ここまで。 　　R=Rを四捨五入。G=Gを四捨五入。B=Bを四捨五入。 　　[R,G,B]で戻る。 ここまで。 #----------------------------------------------- ＃HTMLのカラーコード #----------------------------------------------- //「#RRGGBB」→[R,G,B] // HTMLの16進カラーコード(#RRGGBB)を256色の配列[R,G,B]に分解。 ●(色を|色の)RGB分解 　分色とは変数。分色＝空配列。 　色＝色の「#」を「0x」に置換。 　色＝色を整数変換。 　数を２から０まで繰り返す 　　分色[数]＝色%256。 　　色＝(色-分色[数])/256 　ここまで。 　分色で戻る。 ここまで。 //RGB色の配列をHTMLで使えるカラーコードにする。 ●(rgbの)カラーコード16 　rgbの色混ぜで戻る。 ここまで。 ●(rgbの)カラーコードRGB 　「RGB({rgb[0]},{rgb[1]},{rgb[2]})」で戻る。 ここまで。 ●(rgbの)カラーコードHSL 　rgbをHSL変換。 　「HSL({それ[0]},{それ[1]}%,{それ[2]}%)」で戻る。 ここまで。 ●(透明度とrgbの)カラーコードRGBA 　「RGBA({rgb[0]},{rgb[1]},{rgb[2]},{透明度})」で戻る。 ここまで。 ●(透明度とrgbの)カラーコードHSLA 　rgbをHSL変換。 　「HSLA({それ[0]},{それ[1]}%,{それ[2]}%,{透明度})」で戻る。 ここまで。 #----------------------------------------------- ＃色データの取得と設定 #----------------------------------------------- ●(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関数実行。 ここまで。 #----------------------------------------------- ＃以下はテスト もし、プラグイン名＝「メイン」ならば、 画像w＝320。画像h＝画像w/4*3。処理範囲＝[0,0,画像w,画像h] URL＝「https://n3s.nadesi.com/image.php?f=8.jpg」。撫子＝空。 URLの画像読んだ時には、 撫子＝対象。 　[0,0,画像w,画像h]へ撫子を画像描画。 ここまで。 /* #---------------------------------------- 「function gazo(url) {波カッコ} const img = new window.Image() img.src = url img.crossOrigin="Anonymous" return img {波カッコ閉じ}; gazo("{URL}")」をJS実行。 1秒待つ。 撫子はそれ。 [0,0,画像w,画像h]へ撫子を画像描画。 #---------------------------------------- */ #UI作成 「白黒」のボタン作成して、白黒ボタンに代入。 「セピア」のボタン作成して、セピアボタンに代入。 「反転」のボタン作成して、反転ボタンに代入。 「二値化」のボタン作成して、二値化ボタンに代入。 「ガンマ補正」のボタン作成して、ガンマ補正ボタンに代入。 改行作成。 「輪郭抽出」のボタン作成して、輪郭抽出ボタンに代入。 「モザイク」のボタン作成して、モザイクボタンに代入。 改行作成。 「元画像」のボタン作成して、元画像ボタンに代入。 「描画ダウンロード」のボタン作成して、ダウンロードボタンに代入。 #イベント 白黒ボタンをクリックした時には 　処理範囲を画像グレイスケール。 ここまで。 セピアボタンをクリックした時には 　「#FFCC99」で処理範囲を画像セピア。 ここまで。 反転ボタンをクリックした時には 　処理範囲を画像ネガポジ。 ここまで。 二値化ボタンをクリックした時には 　150で処理範囲を画像モノクロ。 ここまで。 ガンマ補正ボタンをクリックした時には 　2で処理範囲を画像ガンマ補正。 ここまで。 輪郭抽出ボタンをクリックした時には 50で処理範囲の画像輪郭抽出。 ここまで。 モザイクボタンをクリックした時には、 処理範囲を10の画像モザイク。 ここまで。 元画像ボタンをクリックした時には、 [0,0,画像w,画像h]へ撫子を画像描画。 ここまで。 ダウンロードボタンをクリックした時には、 描画ダウンロード。 ここまで。 ここまで。