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)。。。。
灰度演算法