ローカル画像を CANVAS に表示、セピア化やフィルタリングなどの画像加工をします。
・左の（説明）をクリックすると、基本的事項が下にに表示されます。
・ボタンにカーソルを載せると、その処理の説明とコードが表示されます。
さらにクリックすると、右上に処理後の画像が表示されます。
●各画素の変換
（説明）画像は細かい点（画素、ピクセル）の集まりです。 各画素は、赤・緑・青の３原色がそれぞれ０～２５５の段階で表現されます。 それにより、256×256×256＝１６万色（フルカラー）が表現されます。 赤＝ ０、緑＝ ０、青＝ ０：black 赤＝２５５、緑＝ ０、青＝ ０：red 赤＝ ０、緑＝２５５、青＝ ０：green 赤＝ ０、緑＝ ０、青＝２５５：blue 赤＝２５５、緑＝２５５、青＝ ０：yellow 赤＝ ０、緑＝２５５、青＝２５５：aqua 赤＝２５５、緑＝ ０、青＝２５５：fuchsia 赤＝２５５、緑＝２５５、青＝２５５：white 赤＝１２７、緑＝１２７、青＝１２７：gray 赤＝１２７、緑＝１２７、青＝ ０：olive 赤＝ ０、緑＝１２７、青＝１２７：teal 赤＝１２７、緑＝ ０、青＝１２７：purple 元図の情報は 画像１[i][j][c]、変換後の情報は 画像２[i][j][c] に保存されます。 ｉ：画素の縦位置 ｊ：画素の横位置 ｃ：０＝赤、１＝緑、２＝青 ３＝不透明度 画像１[150][200][0] = 127 とは、縦150、横2000の赤の強度が127の意味 「各画素の変換」とは、 画像１[i][j][c] →（操作）→ 画像２[i][j][c] をすることです。 元図をネガ（写真のフィルム）にします。 ３原色の強さは０～２５５なので、それを反転する。
function nega() {
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for(c=0; c<=2; c++) {
画素２[i][j][c] = 255 - 画素１[i][j][c];
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
元図を白黒（モノクロ、グレイスケール）にします。 赤、緑、青の強度を同じにすると灰色になる。 しかし、人間の目の感覚が異なるので調整する。 NTSCで使用されているYIQカラーモデル
function gray() {
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
var y = 0.299*画素１[i][j][0]
+ 0.587*画素１[i][j][1]
+ 0.114*画素１[i][j][2];
画素２[i][j][0] = y;
画素２[i][j][1] = y;
画素２[i][j][2] = y;
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
元図をセピア調（古い写真）にします。 ３原色の値が同じであるとき、その色が彩度０のグレーになる。 NTSCで使用されているYIQカラーモデル ｙ = (0.299 * 赤 + 0.587 * 緑 + 0.114 * 青) グレイスケールになる セピア色にするため、３原色の強弱をつける 赤 = (Y/255) * 240 緑 = (Y/255) * 200 青 = (Y/255) * 145
function sepia() {
for (var i=0; i<縦幅; i++) {
for (var j=0; ji<横幅; j++) {
var y = 0.299*画素１[i][j][0]
+ 0.587*画素１[i][j][1]
+ 0.114*画素１[i][j][2];
画素２[i][j][0] = (y/255)*240;
画素２[i][j][1] = (y/255)*200;
画素２[i][j][2] = (y/255)*145;
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
－２５５～２５５の値を指定してください。
３原色の強さは０～２５５の段階で表されています。
その値に指定した値を加えます。
正のときはその色が強くなり、負のときは弱くなります。
function shift() {
var p = new Array(3);
p[0] = eval(document.shiftform.red.value);
p[1] = eval(document.shiftform.green.value);
p[2] = eval(document.shiftform.blue.value);
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for (c=0; c<=2; c++) {
y = 画素１[i][j][c] + p[c];
if (y > 255) y = 255;
else if(y < 0) y = 0;
画素２[i][j][c] = y;
}
// 透明度（単にコピーするだけ）
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
すべてをγ＝１にすると左画像と同じになり、 ０＜γ＜１とした色は明るく（濃く）なり、 １＜γとした色は暗く（薄く）なります。 モニタにはそれぞれ特性があり、ＲＧＢ信号を正しく表示できません。 それを解消するためにＲＧＢ信号を ｙ＝ｘγ に変更します。 それをγ（ガンマ）補正といいます。 モニタを最初にパソコンに接続したときに設定します。 一般には暗くなる傾向があるので、γ≒２程度が標準的になっています。 しかし、モニタの特性が標準と大きく異なっていたり、設定が不適切ですと、 モニタ画面が元の画像を忠実に表示できません。 また、プリンタにも特性があり、画面と異なる色彩になることがあり、 それを補正するために、プリンタでもγ補正を設定しています。 ここでの操作は、モニタやプリンタの設定を変更するのではなく、 元のＲＧＢ信号にγ補正をしたときの画像を表示します。
function gamma() {
var p = new Array(3);
p[0] = eval(document.gammaform.red.value);
p[1] = eval(document.gammaform.green.value);
p[2] = eval(document.gammaform.blue.value);
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for (c=0; c<=2; c++) {
if (p[c] == 1) {
画素２[i][j][c] = 画素１[i][j][c];
}
else {
y = Math.pow((画素１[i][j][c]/255), p[c]) * 255;
if (y > 255) y = 255;
y = Math.round(y);
画素２[i][j][c] = y;
}
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
３原色の強さを変更します。
０＜左値＜右値＜２５５にしてください。
例：赤[50]～[200] のとき、各画素の赤強度が、
５０以下→０（赤要素を消す）
１００以上→２５５（最大強度）
５０～１００→ その間を直線で変換
y=255/(100-50)*(x-50)
すなわち、５０～１００の変化を際立たせます。
function linear() {
var cmin = new Array(3);
var cmax = new Array(3);
cmin[0] = eval(document.linearform.rmin.value);
cmax[0] = eval(document.linearform.rmax.value);
cmin[1] = eval(document.linearform.gmin.value);
cmax[1] = eval(document.linearform.gmax.value);
cmin[2] = eval(document.linearform.bmin.value);
cmax[2] = eval(document.linearform.bmax.value);
for (c=0; c<=2; c++) {
if ( (cmin[c] < 0) || (cmin[c] >= cmax[c] ) || (cmax[c] > 255) ) {
alert("範囲エラー");
return;
}
}
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for(c=0; c<=2; c++) {
x = 画素１[i][j][c];
if (x <= cmin[c]) y = 0;
else if (x >= cmax[c]) y = 255;
else y = Math.round( 255/(cmax[c]-cmin[c])*(x-cmin[c]) );
画素２[i][j][c] = y;
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
色数は８、２７、６４から選んでください。
下図はフルカラーですが、それを、少ない色にします。
ポスターのような効果があります。
（パステルの本数が少ないような状況です）
色数２７とは、赤・緑・青がそれぞれ３つの強度しかもたない場合です。
強度２５５を３等分して、０、１２７、２５５に変換します。
function postal() {
var irosu = eval(document.postalform.irosu.value);
if (irosu < 16 ) irosu = 8;
else if (irosu < 40 ) irosu = 27;
else irosu = 64;
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for (c=0; c<=2; c++) {
x = 画素１[i][j][c];
if (irosu == 8) {
if (x < 128) y = 0;
else y = 255;
}
else if (irosu == 27) {
if (x < 85) y = 0;
else if (x < 170) y = 127;
else y = 255;
}
else {
if (x < 64) y = 0;
else if (x < 127) y = 85;
else if (x < 192) y = 170;
else y = 255;
}
画素２[i][j][c] = y;
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
|
●フィルタリング
（説明）
フィルタリングとは、各画素について、
隣接画素の情報により加工する操作です。
左上 上 右上 0 -1 0
左 自分 右 について -1 5 -1
左下 下 右下 0 -1 0
重みづけ（フィルタという）を与えると、
自分は５倍になり、
上下左右は－１倍になるので
色の変化が強調された画像になります。
外枠の部分は、canvasを超える部分の画素を参照するので、
それを無視しているので、不正確です。
●代表的なフィルタ（分数形式で入力できます）
平滑化：右の［平滑化」と同じ
┌ 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 ┘
各画素の色を、周囲の画素の平均にします。
色の変化が滑らかになり、ぼやけた感じになります。
フィルタ ┌ 1/9 1/9 1/9 ┐
function smooth() {
for (var i=1; i%lt;縦幅-1; i++) {
for (var j=1; j%lt;横幅-1; j++) {
for (c=0; c%lt;=2; c++) {
画素２[i][j][c] = Math.round
( ( 画素１[i-1][j-1][c]
+ 画素１[i-1][j][c]
+ 画素１[i-1][j+1][c]
+ 画素１[i][j-1][c]
+ 画素１[i][j][c]
+ 画素１[i][j+1][c]
+ 画素１[i+1][j-1][c]
+ 画素１[i+1][j][c]
+ 画素１[i+1][j+1][c]
)
/9);
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
エンボスとは、輪郭を強調した画像です。 墨版画のような感じになります。 エンボスでの代表的なソーベル（Sobel）を使用 画素１をグレイスケール化して左のフィルタをかける。 さらに右のフィルタをかけて画素２にする ┌ -1 0 1 ┐ ┌ -1 -2 -1 ┐ │ -2 0 2 │ │ 0 0 0 │ └ -1 0 1 ┘ └ 1 2 1 ┘
function emboss() {
// ａｂの定義（グレイスケールなので２次元でよい）
var ab = [];
for (var i=0; i<縦幅; i++) {
ab[i] = [];
}
// とりあえず画素１を画素２にグレイスケールでコピーしておく
for (i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
y = Math.round( (画素１[i][j][0] + 画素１[i][j][1] + 画素１[i][j][2]) / 3);
画素２[i][j][0] = y;
画素２[i][j][1] = y;
画素２[i][j][2] = y;
画素２[i][j][3] = 画素１[i][j][3];
}
}
// 画素１に最初のフィルタをかけてグレイスケール化してａｄに書き出す
for (i=1; i<縦幅-1; i++) {
for (j=1; j<横幅-1; j++) {
var sumy = 0;
for (var c=0; c<=2; c++) {
y = (画素１[i-1][j+1][c] + 2*画素１[i][j+1][c] + 画素１[i+1][j+1][c])
- (画素１[i-1][j-1][c] + 2*画素１[i][j-1][c] + 画素１[i+1][j-1][c]);
sumy = sumy + y;
}
ab[i][j] = Math.round(sumy / 3); // ３原色の平均値
}
}
// ａｂを２番目のフィルタをかけてｂに書き出す
for (i=1; i<縦幅-1; i++) {
for (j=1; j<横幅-1; j++) {
y = (ab[i+1][j-1] + 2*ab[i+1][j] + ab[i+1][j+1])
- (ab[i-1][j-1] + 2*ab[i-1][j] + ab[i-1][j+1]);
for (c=0; c<=2; c++) {
画素２[i][j][c] = y;
}
}
}
}
任意のフィルタにより変換します。→★参照
function filter() {
var ul = eval(document.filterform.ul.value);
var uc = eval(document.filterform.uc.value);
var ur = eval(document.filterform.ur.value);
var cl = eval(document.filterform.cl.value);
var cc = eval(document.filterform.cc.value);
var cr = eval(document.filterform.cr.value);
var dl = eval(document.filterform.dl.value);
var dc = eval(document.filterform.dc.value);
var dr = eval(document.filterform.dr.value);
for (var i=1; i<縦幅-1; i++) {
for (var j=1; j<横幅-1; j++) {
for (var c=0; c<=2; c++) {
画素２[i][j][c] = Math.round
( ul*画素１[i-1][j-1][c]
+ uc*画素１[i-1][j][c]
+ ur*画素１[i-1][j+1][c]
+ cl*画素１[i][j-1][c]
+ cc*画素１[i][j][c]
+ cr*画素１[i][j+1][c]
+ dl*画素１[i+1][j-1][c]
+ dc*画素１[i+1][j][c]
+ dr*画素１[i+1][j+1][c] );
if (画素２[i][j][c] > 255) 画素２[i][j][c] = 255;
if (画素２[i][j][c] < 0) 画素２[i][j][c] = 0;
}
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
モザイクとは、いくつかの画素を同じ色にすることです。 例えば１０とすると、縦１０×横１０＝１００画素が、 すべてその平均値の色になります。 小さな画像を拡大したような感じになります。
function mosaic() {
var d = Math.round(eval(document.mosaicform.d.value));
if ( ( d < 1 ) || ( d > 20 ) ) {
alert("画素数エラー：２～２０");
return;
}
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for(c=0; c<=3; c++) {
画素２[i][j][c] = 画素１[i][j][c];
}
}
}
for (var i=0; i<=h-d; i=i+d) {
for (var j=0; j<縦幅-d; j=j+d) {
for (var c=0; c<=2; c++) {
var t = 0;
for (var ii=i; ii<i+d; ii++) {
for (var jj=j; jj<=j+d; jj++) {
t = t + 画素１[ii][jj][c];
}
}
t = Math.round(t/(d*d)); // 縦ｄ×横ｄの画素の平均色
for (ii=i; ii<i+d; ii++) {
for (jj=j; jj<=j+d; jj++) {
画素２[ii][jj][c] = t;
}
}
}
}
}
}
グラデーションとは、色彩を段階的に変化させることです。 ここでは左から右にかけて、次第に赤を弱くし、青を強くしています。
function gradation() {
for (var j=0; j<横幅; j++) {
var 赤 = (横幅 - j) / 横幅;
var 青 = j / 横幅;
for (var i=0; i<縦幅; i++) {
画素２[i][j][0] = 画素１[i][j][0] * 赤;
画素２[i][j][1] = 画素１[i][j][1];
画素２[i][j][2] = 画素１[i][j][2] * 青;
画素２[i][j][3] = 画素１[i][j][3];
}
}
}
透明化とは、画素の透明度を上げて背景の 画像を透かして見えるようにすることです。 画素情報 画素１[i][j][k] の k=3 は透明度を示し、 完全透明は０、透明なしは２５５です。 ここでは、画面の中央矩形内は元のまま、外は半透明にしています。
function opacity() {
var 矩形上 = 縦幅 * (1/4);
var 矩形下 = 縦幅 * (3/4);
var 矩形左 = 横幅 * (1/4);
var 矩形右 = 横幅 * (3/4);
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for (var c=0; c<=3; c++) {
画素２[i][j][c] = 画素１[i][j][c];
}
if ( (i<矩形上) || (i>矩形下)
|| (j<矩形左) || (j>矩形右) ) {
画素２[i][j][3] = Math.round(画素１[i][j][3] / 4)
}
}
}
}
左右回転をします。
function mirror() {
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
var jj = 横幅 - j;
if (jj < 横幅) { // canvas オーバーフローを回避
for (var c=0; c<=3; c++) {
画素２[i][jj][c] = 画素１[i][j][c];
}
}
}
}
}
右画像を左画面に移します。 これにより、各操作を連続的に行なえます。 例えば、［ネガ］→［右→左」→「ネガ」とすると、 右画面が元の画像になります。
function btoa() {
var ctx1data = ctx1.createImageData(横幅, 縦幅);
var outData = ctx1data.data;
var k = 0;
for (var i=0; i<縦幅; i++) {
for (var j=0; j<横幅; j++) {
for (var c=0; c<=3; c++) {
outData[k] = 画素２[i][j][c];
画素１[i][j][c] = 画素２[i][j][c];
k++;
}
}
}
// canvas1に画像表示
ctx1.putImageData(ctx1data, 0, 0);
}
|