2019.1.21 canvas學習小計

KingBinwei發表於2019-02-16
Canvas
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)

。。。。
灰度演算法

相關文章