Canvas Pixel manipulation

by techsin

HTML

<canvas id="can"></canvas>
<img id='i' src="http://www.loc.gov/exhibits/religion/vc006815.jpg" style='display:none;'>

JavaScript

var 
draw= drawApi(),
img= $Id('i'),
can= $Id('can'), ctx= can.getContext('2d');
can.addEventListener('click',black,false);
can.height= img.height;
can.width= img.width;

ctx.drawImage(img, 0, 0); 

var y, x, cp, n, w= can.width, h= can.height, data=0,imageData, dataSorted=[], ps=[],pixels = h*w;

imageData= ctx.getImageData(0,0,w,h);
data= imageData.data;
/*
for(cp=0; cp<pixels; cp++){
    n= cp*4;
    y= ~~(cp/w);
    x= cp-((y)*w)-1;
    dataSorted[y]= dataSorted[y] || [];
    dataSorted[y][x]={
        pn:cp,
        color:[data[(cp*4)],data[(cp*4)+1],data[(cp*4)+2],data[(cp*4)+3]]
    }
}*/

function black(){
    var c,sum, data2 = new Uint32Array(data.buffer), i=0, p=performance.now();
for(cp=0; cp<pixels; cp++){
    sum = Math.round(0.299*data[i] + 0.587*data[++i] + 0.114*data[++i]);
    data2[cp] = (255<<24)|(sum<<16)|(sum<<8)|sum;
    i+=2;
}
   contrast(); ctx.putImageData(imageData, 0, 0); 
}

function contrast(){
    var low=255,high=0,e,histo=[], countL=99999999999999, countH=0, nl=0,nh=0,x,y;
    for (var i=0;i<256;i++){ histo[i]=[]; }
    
    for(var i=+0;i<pixels;i++){ 
            e=data[i*4];
            y= ~~(i/w);
            x= i-((y)*w);
            histo[e].push([x,y]);
            if(e>high) high=e; 
            if(e<low) low=e;
            i+=4;
        }
    
    for(var i=0;i<256;i++){
        if(countH < histo[i].length){ 
            countH=histo[i].length; nh=i;}
        if((countL>histo[i].length)&&histo[i].length){
            countL=histo[i].length; nl=i;}
    }
    console.log(histo);
    console.log('lowest value: '+low+' highest value: '+high);
    console.log('infamous value: '+nl+': '+countL+' famous value: '+nh+': '+countH);
    console.log(histo[nl]);
    var iou=(((histo[nl][0][1]*w)-1)+(histo[nl][0][0]))*4;
    data[iou]=1;data[iou+1]=1;data[iou+2]=1;
    histo[100][0][0]=333;
    console.log(data); console.log(iou);
}


function clk(){

for(cp=0; cp<pixels; cp++){
    n=cp*4;
    y=~~(cp/w);
    x=cp-((y)*w);
     if...