▶ 実 行
▶ 実行
クリア
画像処理をするプラグイン
by 雪乃☆雫
#----------------------------------------------- ＃画像処理 #----------------------------------------------- //三色の平均取った価を三色全部に代入する。 ●(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が大きいほど色2に近付く。(A=0～100。0=色1、100=色2となる) ●(Aで色1と色2の)混色計算 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/100+R1を整数変換。 G=(G2-G1)*A/100+G1を整数変換。 B=(B2-B1)*A/100+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]へ撫子を画像描画。 ここまで。 ダウンロードボタンをクリックした時には、 描画ダウンロード。 ここまで。 ここまで。