2019.1.21 canvas进修小计

2023年6月17日 193次阅读 来源: KingBinwei 
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)

。。。。
灰度算法

    原文作者：KingBinwei
    原文地址: https://segmentfault.com/a/1190000017969007
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞