HTML5 canvas标签－2 简单的3种滤镜

在发现canvas有这么多功能后，我首先尝试着去做一些滤镜

最基本的就是胶片 这个在w3school上有demo

假设原本颜色为rgb(r,g,b);只需要将它变成rgb(255-r,255-g,255-b);即可

原图处理后的

       for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var currentPixel = 4*canvas.width*j + 4* i;
                data.data[currentPixel] = 255-data.data[currentPixel];
                data.data[currentPixel+1] = 255-data.data[currentPixel+1];
                data.data[currentPixel+2] = 255-data.data[currentPixel+2];
            }
        }
        ctx.putImageData(data,0,0);</span>

接下来介绍的是灰度化 这是图像处理中比较重要的一种处理。这里先介绍最基本的一种 就是运用灰度化公式实现的 f(i,j)=0.30R(i,j)+0.59G(i,j)+0.11B(i,j)) （加权平均法）

这是处理后的

代码

        for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var currentPixel = 4*canvas.width*j + 4* i,
                    r = data.data[currentPixel],
                    g = data.data[currentPixel+1],
                    b = data.data[currentPixel+2],
                    gray = 0.3*r+0.59*g+0.11*b;
                data.data[currentPixel] = gray;
                data.data[currentPixel+1] = gray;
                data.data[currentPixel+2] = gray;
            }
        }
        ctx.putImageData(data,0,0);</span>

最后再介绍一下雾化算法 其实很简单 雾化就是打散附近的像素点

这就是我实现的雾化 类似毛玻璃效果

代码

        for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var num = Math.floor(Math.random()*randNum);
                var deltaX,deltaY;
                (i+num)<=canvas.width?deltaX=i+num:deltaX = i-1;
                (j+num)<=canvas.height?deltaY=j+num:deltaY = j-1;
                var currentPixel = 4*canvas.width*j + 4* i;
                var deltaPixel = 4*canvas.width*deltaY+4*deltaX;
                data.data[currentPixel]=data.data[deltaPixel];
                data.data[currentPixel+1]=data.data[deltaPixel+1];
                data.data[currentPixel+2]=data.data[deltaPixel+2];
            }
        }
        ctx.putImageData(data,0,0);

这里就先介绍三种最简单的滤镜 以后有时间再补充