首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

canvas滤镜效果实现代码

- Author -

蓝丶木鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
node.js实现快速截图
Aug 27 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
js实现日历与定时器
Feb 22 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
小程序页面动态配置实现方法
Feb 05 Javascript
通过js实现压缩图片上传功能
Feb 25 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
A254(1) SHARP(1) RP2100(1) 安健(1) SRF-M100(1) GF515(1) 上海永华(1) 德劲1107(1) 德劲1102(1) YH-R296(1)
You might like
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
基于python的列表list和集合set操作
2019/11/24 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
励志演讲稿范文
2014/04/29 职场文书
关于安全的演讲稿
2014/05/09 职场文书
中央空调节能方案
2014/06/15 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
公司授权委托书
2014/10/17 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书