スタートページ＞ Javascript

画像加工

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


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

初期設定に戻ります。


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

●各画素の変換 （説明）
画像は細かい点（図では横４００、縦３００）の集まりです。
その細かい点を画素（ピクセル）といいます。
各画素は、赤・緑・青の３原色がそれぞれ０～２５５の段階で表現されます。
それにより、256×256×256＝１６万色（フルカラー）が表現されます。

赤＝　　０、緑＝　　０、青＝　　０：black
赤＝２５５、緑＝　　０、青＝　　０：red
赤＝　　０、緑＝２５５、青＝　　０：green
赤＝　　０、緑＝　　０、青＝２５５：blue
赤＝２５５、緑＝２５５、青＝　　０：yellow
赤＝　　０、緑＝２５５、青＝２５５：aqua
赤＝２５５、緑＝　　０、青＝２５５：fuchsia
赤＝２５５、緑＝２５５、青＝２５５：white
赤＝１２７、緑＝１２７、青＝１２７：gray
赤＝１２７、緑＝１２７、青＝　　０：olive
赤＝　　０、緑＝１２７、青＝１２７：teal
赤＝１２７、緑＝　　０、青＝１２７：purple

元図の情報は a[i][j][c]、下図の情報は b[i][j][c] に保存されます。
　　ｉ：画素の縦位置
　　ｊ：画素の横位置
　　ｃ：０＝赤、１＝緑、２＝青　３＝不透明度
　 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)にします。

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

　　赤 緑 青
－２５５～２５５の値を指定してください。
３原色の強さは０～２５５の段階で表されています。
その値に指定した値を加えます。
正のときはその色が強くなり、負のときは弱くなります。

　　　赤 緑 青
すべてをγ＝１にすると左画像と同じになり、
０＜γ＜１とした色は明るく（濃く）なり、
１＜γとした色は暗く（薄く）なります。

モニタにはそれぞれ特性があり、ＲＧＢ信号を正しく表示できません。
それを解消するためにＲＧＢ信号を ｙ＝ｘγ に変更します。
それをγ（ガンマ）補正といいます。

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

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

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

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

　　　色数
色数は８、２７、６４から選んでください。
下図はフルカラー（１６万色）ですが、それを、少ない色にします。
（パステルの本数が少ないような状況です）
ポスターのような効果があるのでポスタリゼーションといいます。

例えば色数２７とは、赤・緑・青がそれぞれ３つの強度しかもたない場合です。
強度２５５を３等分して、０、１２７、２５５に変換します。
●フィルタリング （説明）
フィルタリングとは、各画素について、隣接画素の情報により加工する操作です。
　　左上　上　　右上　　　　　　　 0　-1　 0
　　左　　自分　右　　　について　-1　 5　-1
　　左下　下　　右下　　　　　　　 0　-1　 0
の重みづけ（フィルタという）を与えると、自分は５倍になり上下左右は－１倍になるので、色の変化が強調された画像になります。

各画素の色を、周囲の画素の平均にします。
色の変化が滑らかになり、ぼやけた感じになります。
フィルタ　┌ 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）を使用
ａをグレイスケール化して左のフィルタをかけてａｂに書き出す
　　　┌ -1　0　1 ┐　　┌ -1 -2 -1 ┐
　　　│ -2　0　2 │　　│　0　0　0 │
　　　└ -1　0　1 ┘　　└　1　2　1 ┘
さらにａｂに右のフィルタをかけてｂにする

　　　
　　　
　　　
任意のフィルタにより変換します。
フィルタとは、周辺の画素の色強度に重みをつけて、それを中心の画素の強度とする操作です。
　　　左上　上　　右上
　　　左　　中心　右
　　　左下　下　　右下
各要素の値は－５～５程度が適切
合計値＝１：全体の明るさが元と同程度
合計値＝０：全体の明るさがやや暗くなる
●代表的なフィルタ（分数形式で入力できます）
平滑化：右の［平滑化」と同じ
　　┌ 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 ┘
●その他

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

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

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

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