canvas如何实现滤镜效果

发布时间:2021-06-29 09:33:45 作者:小新
来源:亿速云 阅读:324

这篇文章给大家分享的是有关canvas如何实现滤镜效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

具体内容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-滤镜</title> 
  <style> 
    canvas{ 
      border: 1px solid red; 
      float: left; 
      /* background-color:red; */ 
    } 
  </style> 
</head> 
<body> 
  <canvas id="oldCanvas" width="500px" height="300px"> 
  </canvas> 
  <canvas id="nowCanvas" width="500px" height="300px"> 
  </canvas> 
  <button onclick = "copy2()">底片效果</button><br> 
  <button onclick = "copy3()">黑白效果</button><br> 
  <button onclick = "copy4()">浮雕效果</button><br> 
  <button onclick = "copy1()">灰色滤镜</button><br> 
  <button onclick = "copy5()">绿色滤镜</button><br> 
  <button onclick = "copy6()">蓝色滤镜</button><br> 
  <button onclick = "copy7()">红色滤镜</button><br> 
  <button onclick = "copy8()">黄色滤镜</button><br> 
  <button onclick = "copy9()">紫色滤镜</button><br> 
  <button onclick = "copy10()">青色滤镜</button><br> 
  <script> 
    //获取到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<imgdata.data.length;i += 4){ 
        //计算获取单位元素的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 四个值); 
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); 
      for(var i=0;i<imgdata.data.length;i += 4){ 
        //将所有的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 四个值); 
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); 
      for(var i=0;i<imgdata.data.length;i += 4){ 
        //计算获取单位元素的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<imgdata.data.length;i += 4){ 
        //浮雕效果的算法:当前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 四个值); 
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); 
      for(var i=0;i<imgdata.data.length;i += 4){ 
        //绿色滤镜的算法:当前绿色通道值G*1.4得到绿色滤镜 
        var g =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 < imgdata.data.length; i += 4) { 
        //蓝色滤镜的算法:当前蓝色通道值变为原来的1.6得到蓝色滤镜 
        var b = 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 < imgdata.data.length; i += 4) { 
        //红色滤镜的算法:当前红色通道值变为原来的2得到红色滤镜 
        var r = 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 < imgdata.data.length; i += 4) { 
        //黄色滤镜的算法:红色通道值和绿色通道值增加50(红色+绿色 = 黄色) 
        var r = imgdata.data[i] +50; 
        var g = 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 < imgdata.data.length; i += 4) { 
        //紫色滤镜的算法:红色通道值和蓝色通道值增加50(红色+蓝色 = 紫色) 
        var r = imgdata.data[i] +50; 
        var b = 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 < imgdata.data.length; i += 4) { 
        //青色滤镜的算法:绿色通道值和蓝色通道值增加50(绿色+蓝色 = 青色) 
        var g = imgdata.data[i+1] +50; 
        var b = 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); 
    } 
  </script> 
</body> 
</html>

感谢各位的阅读!关于“canvas如何实现滤镜效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 用canvas实现图片滤镜效果详解之视频效果
  2. 用canvas实现图片滤镜效果详解之灰度效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

canvas

上一篇:Web/移动应用开发中PivotGrid的作用是什么

下一篇:flink1.2版本时间、水位线的介绍和用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》