canvas 滤镜处理基础篇（一）

版权声明： https://blog.csdn.net/weixin_38500689/article/details/79667613

canvas 做滤镜处理实现基本的美图效果
canvas 做图像处理的原理是什么呢？就是根据你要的效果对画布图像的rgba通道的值做处理
首先两个canvas画布，一个展示原始图像，另一个展示处理后的图像

```
<--html -->
<canvas id="canvasa" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
    你的浏览器不支持canvas
</canvas>

<canvas id="canvasb" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
    你的浏览器不支持canvas
</canvas>
<--js -->
var canvasa = document.getElementById("canvasa");
    var  contexta = canvasa.getContext("2d");
    var canvasb = document.getElementById("canvasb");
    var  contextb = canvasb.getContext("2d");
    var image = new Image();
    window.onload = function(){
        image.src = "./lugage.png";
        image.onload = function () {
            contexta.drawImage(image, 0 , 0 ,canvasa.width, canvasa.height);
            var url = canvasa.toDataURL("image/png");
            console.log(url);
        };
       };

接下来处理图像
1.灰度处理

//灰度效果
    function greyEffect(){
        var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
        var pixelData = imageData.data;//拿到画布A的图像数据

        for(var i=0;i<= canvasb.width*canvasb.height; i++){
          var r =  pixelData[4*i + 0];//r
          var g =  pixelData[4*i + 1];//g
          var b =  pixelData[4*i + 2];//b
            var grey = r*0.3 + g*0.59 +b*0.11;//灰度值计算公式

            pixelData[i*4 + 0] = grey;
            pixelData[i*4 + 1] = grey;
            pixelData[i*4 + 2] = grey;

        }
//绘制到画布B上        contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
    }

2.反色处理（底片效果）

 //底片效果
    function reverEffect(){
        console.log("conme");
        var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
        var pixelData = imageData.data;

        for(var i=0;i<= canvasb.width*canvasb.height; i++){

            var r =  pixelData[4*i + 0];//r
            var g =  pixelData[4*i + 1];//g
            var b =  pixelData[4*i + 2];//b


            pixelData[i*4 + 0] = 255 -r;//取互补的值
            pixelData[i*4 + 1] = 255 -g;
            pixelData[i*4 + 2] = 255 -b;

        }
        contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
    }

3. 明暗处理

function brightness(t) {//t 明暗参数 正为亮 负为暗（下图以-60为例）
           var a = contexta.getImageData(0,0,canvasa.width,canvasa.height);

       t = map(t, -100, 100, -255, 255);
                console.log(t);
        for (var e = 0; e < a.width; e++) for (var o = 0; o < a.height; o++) {
            var i = 4 * o * a.width + 4 * e,
                    r = a.data[i],
                    h = a.data[i + 1],
                    n = a.data[i + 2];
                    r += t;
                    h += t;
                    n += t;
            r > 255 && (r = 255),
            0 > r && (r = 0),
            h > 255 && (h = 255),
            0 > h && (h = 0),
            n > 255 && (n = 255),
            0 > n && (n = 0),
                    a.data[i] = r,
                    a.data[i + 1] = h,
                    a.data[i + 2] = n
        }
           contextb.putImageData(a ,0,0,0,0,canvasb.width,canvasb.height);

    }