首页
所有分类
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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue3.0生命周期的示例代码
Sep 24 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
offset(1) mysql.user(1) 性能优化(3) 事务(5) limit(1) MYSQL函数(1) 逻辑架构(1) 锁(1) Mysql报错(1) 定时任务(2)
You might like
使用apache模块rewrite_module (转)
2007/02/14 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript 一些用法小结
2009/09/11 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Marks & Spencer爱尔兰：英国马莎百货
2016/04/20 全球购物
Revolution Beauty美国官网：英国知名化妆品网站
2018/07/23 全球购物
XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？
2016/01/12 面试题
高校自主招生自荐信
2013/12/09 职场文书
上班上网检讨书
2014/01/29 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python