canvas滤镜效果实现代码


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
canvas实现图像放大镜
Feb 06 #Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 #Javascript
jQuery快速实现商品数量加减的方法
Feb 06 #Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 #Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Vue实现简易计算器
2020/02/25 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
旅游管理专业个人求职信范文
2013/12/24 职场文书
2014年清明节寄语
2014/04/03 职场文书
总经理人事任命书
2014/06/05 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
消防宣传语大全
2015/07/13 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
javascript canvas实现雨滴效果
2021/06/09 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫