javascript - Faulty Logic in this image color equalization algorithm -
somewhere in code, seem doing wrong , cannot tell part going awry. i've printed console values i'm getting various arrays , seems match up. when run equalization function (a la wikipedia-histogram equalization) output image close total black. trying interpret this guy's php javascript test stuff out , figured did decent job. i'm not expert.
the pertinent parts:
function imageloaded(ev) { element = document.getelementbyid("canvas1"); c = element.getcontext("2d"); im = ev.target; // image // read width , height of canvas width = element.width; height = element.height; // stamp image on left of canvas: c.drawimage(im, 0, 0); // canvas pixel data imagedata = c.getimagedata(0, 0, width, height); w2 = width / 2; var reds = new array(); var greens = new array(); var blues = new array(); var freqr = new array(); var freqg = new array(); var freqb = new array(); if (imagedata){ buildhistograms(reds, greens,blues); buildfrequencies(reds, greens, blues, freqr, freqg, freqb); } var alpha = 255/(w2*height); // run through image (y = 0; y < height; y++) { inpos = y * width * 4; // *4 4 ints per pixel outpos = inpos + w2 * 4; (x = 0; x < w2; x++) { //reads pixel data(of img c)to each channel of rgb r = imagedata.data[inpos++]; g = imagedata.data[inpos++]; b = imagedata.data[inpos++]; = imagedata.data[inpos++]; //using histogram eqalization formula: adjr = freqr[r]*alpha; adjg = freqg[g]*alpha; adjb = freqb[b]*alpha; //assigns pixel data of output image imagedata.data[outpos++] = adjr; imagedata.data[outpos++] = adjg; imagedata.data[outpos++] = adjb; imagedata.data[outpos++] = a; } } // put pixel data on canvas c.putimagedata(imagedata, 0,0); } im = new image(); im.onload = imageloaded; im.src = "lenna.png"; function buildhistograms(reds,greens,blues){ //run through image building histogram (y=0; y < height; y++){ inpos = y * width *4; (x=0; x < w2; x++){ rd = imagedata.data[inpos++]; g = imagedata.data[inpos++]; b = imagedata.data[inpos++]; = imagedata.data[inpos++]; // add counts our histogram arrays each color. reds.push(rd); greens.push(g); blues.push(b); } } // sort them keys order reds.sort(function(a,b){return a-b}); greens.sort(function(a,b){return a-b}); blues.sort(function(a,b){return a-b}); } function buildfrequencies(reds, greens, blues, freqr, freqg, freqb){ // build frequency charts colors: takes reds greens blues buildhistograms , places them on top of each other accordingly for(i=0; i<=255; i++){ sumr=0; sumg=0; sumb=0; for(j=0; j<= i; j++){ if (reds[j]){sumr+=reds[j];} if (greens[j]){sumg+=greens[j];} if (blues[j]){sumb+=blues[j];} } freqr[i] = sumr; freqg[i] = sumg; freqb[i] = sumb; } }
any appreciated, thanks.
looks build frequencies section wrong. modified in way:
var len = reds.length; (j=0; j < len; j++) { var rcurrval = reds[j]; var gcurrval = greens[j]; var bcurrval = blues[j]; if (freqr.hasownproperty(rcurrval)) { freqr[rcurrval] += 1; } else { freqr[rcurrval] = 1; } if (freqg.hasownproperty(gcurrval)) { freqg[gcurrval] += 1; } else { freqg[gcurrval] = 1; } if (freqb.hasownproperty(bcurrval)) { freqb[bcurrval] += 1; } else { freqb[bcurrval] = 1; } } (i=0; i<255; i++){ if ($.inarray(i,reds)===-1){freqr[i]=0;} if ($.inarray(i,greens)=== -1){freqg[i]=0;} if ($.inarray(i,blues)=== -1){freqb[i]=0;} if (i>0){ freqr[i]+=freqr[i-1]; freqg[i]+=freqg[i-1]; freqb[i]+=freqb[i-1]; } }