[編集モード] 画像処理をするプラグイン

画像処理をする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]へ撫子を画像描画。
    ここまで。
    ダウンロードボタンをクリックした時には、
      描画ダウンロード。
    ここまで。

ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 画像処理をするプラグイン

素材のアップロード