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 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
原生js实现购物车
Sep 23 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Python 连连看连接算法
2008/11/22 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
详解python中的Turtle函数库
2018/11/19 Python
Python数据集切分实例
2018/12/08 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python 实现矩阵填充0的例子
2019/11/29 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
.net C#面试题
2012/08/28 面试题
先进班级集体事迹材料
2014/01/30 职场文书
先进个人总结范文
2015/02/15 职场文书
班主任寄语2016
2015/12/04 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
《颐和园》教学反思
2016/02/19 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL