スタートページJavascript

画像加工

通常の画像処理ソフトで簡単にできることを、わざわざ自作してみました。
次のような加工ができます。



初期設定では、上の「元の画像」を対象にしていますが、下のボタンをクリックして、あなたのパソコンにある画像のローカルファイルを対象にすることができます。
標準サイズは300x400です。圧縮・拡大され、3:4でないときは右・下が空白になります。

初期設定に戻ります。


(説明)をクリックすると、画素の変換、フィルタリングについて、基本的事項が下に表示されます。
ボタンにカーソルを載せると、その処理の説明が表示されます。
さらにクリックすると、右下に処理後の画像が表示されます。

●各画素の変換 (説明)
画像は細かい点(図では横400、縦300)の集まりです。
その細かい点を画素(ピクセル)といいます。
各画素は、赤・緑・青の3原色がそれぞれ0~255の段階で表現されます。
それにより、256×256×256=16万色(フルカラー)が表現されます。

赤=  0、緑=  0、青=  0:black
赤=255、緑=  0、青=  0:red
赤=  0、緑=255、青=  0:green
赤=  0、緑=  0、青=255:blue
赤=255、緑=255、青=  0:yellow
赤=  0、緑=255、青=255:aqua
赤=255、緑=  0、青=255:fuchsia
赤=255、緑=255、青=255:white
赤=127、緑=127、青=127:gray
赤=127、緑=127、青=  0:olive
赤=  0、緑=127、青=127:teal
赤=127、緑=  0、青=127:purple

元図の情報は a[i][j][c]、下図の情報は b[i][j][c] に保存されます。
  i:画素の縦位置
  j:画素の横位置
  c:0=赤、1=緑、2=青 3=不透明度
  a[150][200][0] = 127 とは、縦150、横2000(画像の中心)の赤の強度が127の意味
「各画素の変換」とは、 a[i][j][c] →(操作)→ b[i][j][c]  をすることです。


元図を白黒(モノクロ、グレイスケール)にして下図に表示します。
赤、緑、青の強度を同じにすると灰色になる。
しかし、人間の目の感覚が異なるので調整する。
NTSCで使用されているYIQカラーモデル
  出力画素 = (0.299 * 赤 + 0.587 * 緑 + 0.114 * 青)

元図をセピア調(古い写真)にして下図に表示します。
いったんグレイスケールにして、セピア色(240,200,145)にします。

元図をネガ(写真のフィルム)にして下図に表示します。

  赤
-255~255の値を指定してください。
3原色の強さは0~255の段階で表されています。
その値に指定した値を加えます。
正のときはその色が強くなり、負のときは弱くなります。

   赤
すべてをγ=1にすると左画像と同じになり、
0<γ<1とした色は明るく(濃く)なり、
1<γとした色は暗く(薄く)なります。

モニタにはそれぞれ特性があり、RGB信号を正しく表示できません。
それを解消するためにRGB信号を y=xγ に変更します。
それをγ(ガンマ)補正といいます。

モニタを最初にパソコンに接続したときに設定します。
一般には暗くなる傾向があるので、γ≒2程度が標準的になっています。
しかし、モニタの特性が標準と大きく異なっていたり、設定が不適切ですと、
モニタ画面が元の画像を忠実に表示できません。

また、プリンタにも特性があり、画面と異なる色彩になることがあり、
それを補正するために、プリンタでもγ補正を設定しています。

ここでの操作は、モニタやプリンタの設定を変更するのではなく、
元のRGB信号にγ補正をしたときの画像を表示します。

   赤
   緑
   青
3原色の強さを変更します。
0<左値<右値<255にしてください。
例:赤[50]~[200] のとき、各画素での赤の強度が、
  50以下→0(赤要素を消す)
  100以上→255(最大強度)
  50~100→ その間を直線で変換
             y=255/(100-50)*(x-50)
すなわち、50~100の変化を際立たせる効果があります。

   色数
色数は8、27、64から選んでください。
下図はフルカラー(16万色)ですが、それを、少ない色にします。
(パステルの本数が少ないような状況です)
ポスターのような効果があるのでポスタリゼーションといいます。

例えば色数27とは、赤・緑・青がそれぞれ3つの強度しかもたない場合です。
強度255を3等分して、0、127、255に変換します。
●フィルタリング (説明)
フィルタリングとは、各画素について、隣接画素の情報により加工する操作です。
  左上 上  右上        0 -1  0
  左  自分 右   について -1  5 -1
  左下 下  右下        0 -1  0

の重みづけ(フィルタという)を与えると、自分は5倍になり上下左右は-1倍になるので、色の変化が強調された画像になります。

各画素の色を、周囲の画素の平均にします。
色の変化が滑らかになり、ぼやけた感じになります。
フィルタ ┌ 1/9 1/9 1/9 ┐
     │ 1/9 1/9 1/9 │
     └ 1/9 1/9 1/9 ┘

色の変化を強調した画像になります。
フィルタ ┌ 0 -1  0 ┐
     │-1  5 -1 │
     └ 0 -1  0 ┘

エンボスとは、輪郭を強調した画像です。
墨版画のような感じになります。

エンボスでの代表的なソーベル(Sobel)を使用
aをグレイスケール化して左のフィルタをかけてabに書き出す
   ┌ -1 0 1 ┐  ┌ -1 -2 -1 ┐
   │ -2 0 2 │  │ 0 0 0 │
   └ -1 0 1 ┘  └ 1 2 1 ┘

さらにabに右のフィルタをかけてbにする

   
   
   
任意のフィルタにより変換します。
フィルタとは、周辺の画素の色強度に重みをつけて、それを中心の画素の強度とする操作です。
   左上 上  右上
   左  中心 右
   左下 下  右下

各要素の値は-5~5程度が適切
合計値=1:全体の明るさが元と同程度
合計値=0:全体の明るさがやや暗くなる

●代表的なフィルタ(分数形式で入力できます)
平滑化:右の[平滑化」と同じ
  ┌ 1/9 1/9 1/9 ┐
  │ 1/9 1/9 1/9 │
  └ 1/9 1/9 1/9 ┘
ガウシアン:平滑化
  ┌ 1/16 2/16 1/16 ┐
  │ 2/16 4/16 2/16 │
  └ 1/16 2/16 1/16 ┘
鮮鋭化:右の[鮮鋭化」と同じ
  ┌ 0 -1  0 ┐
  │-1  5 -1 │
  └ 0 -1  0 ┘
鮮鋭化:斜め隣接画素の影響も考慮
  ┌ -1 -1 -1 ┐
  │ -1  9 -1 │
  └ -1 -1 -1 ┘
ラプラシアン:鮮鋭化やエッジ検出、[鮮鋭化」と逆転
  ┌ 0  1  0 ┐
  │ 1 -4  1 │
  └ 0  1  0 ┘
Prewitt:エッジ検出(縦方向)
  ┌ -1 -1 -1 ┐
  │ 0  0  0 │
  └ 1  1  1 ┘
Sobel:エッジ検出(横方向)
  ┌ -1 0 1 ┐
  │ -2 0 2 │
  └ -1 0 1 ┘
エンボス:左の「エンボス」と同じ。エッジ検出の一つ
  ┌ 5  3  0 ┐
  │ 3  1 -3 │
  └ 0 -3 -5 ┘
●その他

   画素数
モザイクとは、いくつかの画素を同じ色にすることです。
例えば10とすると、縦10×横10=100画素が、すべてその平均値の色になります。
小さな画像を拡大したような感じになります。

グラデーションとは、色彩を段階的に変化させることです。
ここでは左から右にかけて、次第に赤を弱くし、青を強くしています。

透明化とは、画素の透明度を上げて背景の画像を透かして見えるようにすることです。
ここでは、中心部分を元画像のままにし、周囲になるにつれて透明度を上げています。

下画像を上画面に移します。
これにより、各操作を連続的に行うことができます。
例えば、[ネガ]→[下→上」→「ネガ」とすると、下画面が元の画像になります。