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实现页面打印的三种方法
Mar 05 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
js中arguments对象的深入理解
May 14 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
jQuery AJAX应用实例总结
May 19 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实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php短信接口代码
2016/05/13 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
永不消失的title提示代码
2007/02/15 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
python 类详解及简单实例
2017/03/24 Python
python非递归全排列实现方法
2017/04/10 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python实现决策树分类
2018/08/30 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
基于django传递数据到后端的例子
2019/08/16 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
使用K.function()调试keras操作
2020/06/17 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
护士进修自我鉴定
2014/02/07 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
食品安全责任书范本
2015/05/09 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server
使用CSS实现音波加载效果
2023/05/07 HTML / CSS