html设置图像灰度,HTML 5灰度图像处理练习1：直方图和灰度反转

Grayscale Image Test

table {margin:auto;}

Grayscale Image Test
Invert Reset SMPTE CT
© May, 2011, lifegame@263.net

var ctUri ='ct.jpg';

var smpteUri ='smpte.gif';

var girlUri ='dmtjc5016.gif';

var icanvas = document.getElementById('imageviewer');

var icanvasWidth = parseInt(icanvas.getAttribute("width"));

var icanvasHeight = parseInt(icanvas.getAttribute("height"));

var icontext = icanvas.getContext('2d');

var scanvas = document.getElementById('statistic');

var scanvasWidth = parseInt(scanvas.getAttribute("width"));

var scanvasHeight = parseInt(scanvas.getAttribute("height"));

var scontext = scanvas.getContext('2d');

function loadImage(uri){

var img =new Image();

img.src = uri;

img.onload =function(){

icontext.drawImage(img,0,0);

loadStatistic();

};

}

function loadStatistic(){

var imgData = icontext.getImageData(0,0,icanvasWidth,icanvasHeight);

var pixTotal = imgData.height*imgData.width;

var pixCount = [];

for(i=0;i<256;i++) pixCount[i]=0;

            for(y=0;y

                    for(x=0;x

var pv = Math.min(255,imgData.data[(y*imgData.width+x)*4]);

pixCount[pv]++;

}

}

scontext.clearRect(0,0,scanvasWidth,scanvasHeight);

var stImg = scontext.getImageData(0,0,scanvasWidth,scanvasHeight);

for(x=0;x<256;x++){

var c = pixCount[x];

var h = stImg.height - Math.round(stImg.height*c/pixTotal);

for(y=h;y

var i = (y*stImg.width+x)*4;

stImg.data[i]=stImg.data[i+1]=stImg.data[i+2]=0;

stImg.data[i+3]=255;

}

}

scontext.putImageData(stImg,0,0);

}

function invertImage(){

var imgData = icontext.getImageData(0,0,icanvasWidth,icanvasHeight);

            for(y=0;y

                    for(x=0;x

var i = (y*imgData.width+x)*4;

var pv = Math.abs(255-imgData.data[i]);

imgData.data[i]=imgData.data[i+1]=imgData.data[i+2]=pv;

}

}

icontext.putImageData(imgData,0,0);

loadStatistic();

}

window.addEventListener("load", loadImage(girlUri),true);