var c = document.querySelector(‘#drawing’);
var ctx = c.getContext(“2d”);
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
}
image.src = “images/palette.jpg”;
var makePixelGrayScale = function (r, g, b, a) {
var y = (0.3 * r) +（0.59 * g）+ (0.11 * b);
return {r:y, g:y, b:y, a:y};
}
// 灰度算法
function makeGrayScale() {
var r, g, b, a;
var imageData = ctx.getImageData(0, 0, 300, 300);
var numPixels = imageData.data.length/4;
for (var i = 0; i < numPixels; i++) {
r = imageData.data[i * 4 + 0];
g = imageData.data[i * 4 + 1];
b = imageData.data[i * 4 + 2];
a = imageData.data[i * 4 + 3];
pixel = makePixelGrayScale(r, g, b, a);
imageData.data[i * 4 + 0] = pixel.r;
imageData.data[i * 4 + 1] = pixel.g;
imageData.data[i * 4 + 2] = pixel.b;
imageData.data[i * 4 + 3] = pixel.a;
}
ctx.putImageDate(imageData,0 , 0);
}
灰度算法 1. 平均
For Each Pixel in Image {
Red = Pixel.Red
Green = Pixel.Green
Blue = Pixel.Blue
Gray = (Red + Green + Blue) / 3
Pixel.Red = Gray
Pixel.Green = Gray
Pixel.Blue = Gray
}
2. 亮度
Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)
3. 去饱和
Gray = (Max(Red, Green, Blue) + Min(Red, Green, Blue) ) / 2
4. 分解
最大分解：
Gray = Max(Red, Green, Blue)
最小分解：
Gray = Min(Red, Green, Blue)
。。。。灰度算法