html5 直方图,HTML5 canvas标签－4 灰度直方图的实现

function getHistogram(imgData){

//先灰度化

var data = imgData,detailArr = [],heightOfCanvas = 500;

for (var i=0;i<256;i++){

detailArr.push(0);

}

for (var i=0;i

for (var j=0;j

var currentPixel = 4*canvas.width*j + 4* i,

r = data.data[currentPixel],

g = data.data[currentPixel+1],

b = data.data[currentPixel+2],

gray = 0.3*r+0.59*g+0.11*b;

detailArr[Math.floor(gray)]+=1;

}

}

var biggestNum = 0,heightOfEach = 0;

for (var i=0;i

(biggestNum

}

heightOfEach = heightOfCanvas/biggestNum;

histogramCtx.moveTo(0,heightOfCanvas);

histogramCtx.strokeStyle = 'black';

for (var i=0;i

histogramCtx.lineTo(1+i*2,heightOfCanvas-(heightOfEach*detailArr[i]));

}

histogramCtx.lineTo(514,heightOfCanvas);

histogramCtx.lineTo(0,heightOfCanvas);

histogramCtx.fillStyle = "black";

histogramCtx.stroke();

histogramCtx.fill();

histogramCtx.closePath();

}