canvas滤镜效果实现代码

  底片效果

  黑白效果

  浮雕效果

  灰色滤镜

  绿色滤镜

  蓝色滤镜

  红色滤镜

  黄色滤镜

  紫色滤镜

  青色滤镜

    //获取到canvas元素

    var oldcanvas = document.getElementById('oldCanvas');

    //获取canvas中的画图环境

    var oldcontext = oldcanvas.getContext('2d');

    //获取到canvas元素

    var nowcanvas = document.getElementById('nowCanvas');

    //获取canvas中的画图环境

    var nowcontext = nowcanvas.getContext('2d');

    var img = new Image();

    img.src = "./image/liuyifei.jpg";

    window.onload = function (){

      //绘制图像

      oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);

      copy1();

    };

    //灰度效果

    function copy1(){

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);

      for(var i=0;i

        //计算获取单位元素的RBG然后取平均值 然后复制给自身得到灰色的图像

        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;

        imgdata.data[i] =avg;

        imgdata.data[i+1] =avg;

        imgdata.data[i+2] =avg;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //底片效果

    function copy2(){

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);

      for(vari=0;i

        //将所有的RGB值重新赋值（底片效果 = 255 - 当前的RGB值）

        imgdata.data[i] =255-imgdata.data[i];

        imgdata.data[i+1] =255-imgdata.data[i+1];

        imgdata.data[i+2] =255-imgdata.data[i+2];

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //黑白效果

    function copy3(){

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);

      for(vari=0;i

        //计算获取单位元素的RBG然后取平均值

        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;

        imgdata.data[i] =avg>128 ? 255 :0;

        imgdata.data[i+1] =avg>128 ? 255 :0;

        imgdata.data[i+2] =avg>128 ? 255 :0;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //浮雕效果

    function copy4(){

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);

      for(var i=0;i

        //浮雕效果的算法：当前RGB减去相邻的GRB得到的值再加上128

        imgdata.data[i] =imgdata.data[i]-imgdata.data[i+4]+128;

        imgdata.data[i+1] =imgdata.data[i+1]-imgdata.data[i+5]+128;

        imgdata.data[i+2] =imgdata.data[i+2]-imgdata.data[i+6]+128;

        //计算获取单位元素的RBG然后取平均值 再次灰度，优化浮雕的效果

        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;

        imgdata.data[i] =avg;

        imgdata.data[i+1] =avg;

        imgdata.data[i+2] =avg;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //绿色滤镜

    function copy5(){

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);

      for(vari=0;i

        //绿色滤镜的算法：当前绿色通道值G*1.4得到绿色滤镜

        varg=imgdata.data[i+1]*1.4;

        //注：当前值大于255时将其赋值255

        imgdata.data[i+1] =g>255 ? 255 : g;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //蓝色滤镜

    function copy6() {

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);

      for (var i = 0; i

        //蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜

        varb=imgdata.data[i + 2] * 1.6;

        //注：当前值大于255时将其赋值255

        imgdata.data[i + 2] = b > 255 ? 255 : b;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //红色滤镜

    function copy7() {

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);

      for (var i = 0; i

        //红色滤镜的算法：当前红色通道值变为原来的2得到红色滤镜

        varr=imgdata.data[i] * 2;

        //注：当前值大于255时将其赋值255

        imgdata.data[i] = r > 255 ? 255 : r;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //黄色滤镜

    function copy8() {

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);

      for (var i = 0; i

        //黄色滤镜的算法：红色通道值和绿色通道值增加50（红色+绿色 = 黄色）

        varr=imgdata.data[i] +50;

        varg=imgdata.data[i+1] +50

        //注：当前值大于255时将其赋值255

        imgdata.data[i] = r > 255 ? 255 : r;

        imgdata.data[i+1] = g > 255 ? 255 : g;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //紫色滤镜

    function copy9() {

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);

      for (var i = 0; i

        //紫色滤镜的算法：红色通道值和蓝色通道值增加50（红色+蓝色 = 紫色）

        varr=imgdata.data[i] +50;

        varb=imgdata.data[i+2] +50

        //注：当前值大于255时将其赋值255

        imgdata.data[i] = r > 255 ? 255 : r;

        imgdata.data[i+2] = b > 255 ? 255 : b;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }

    //青色滤镜

    function copy10() {

      //获取ImageData的属性：width，height，data（包含 R G B A 四个值）；

      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);

      for (var i = 0; i

        //青色滤镜的算法：绿色通道值和蓝色通道值增加50（绿色+蓝色 = 青色）

        varg=imgdata.data[i+1] +50;

        varb=imgdata.data[i+2] +50

        //注：当前值大于255时将其赋值255

        imgdata.data[i+1] = g > 255 ? 255 : g;

        imgdata.data[i+2] = b > 255 ? 255 : b;

      }

      //将图像信息绘制第二个canvas中，注：一般只能在服务下运行

      nowcontext.putImageData(imgdata,0,0);

    }