JavaScript多种滤镜算法实现代码实例


Posted in Javascript onDecember 10, 2019

这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.灰色滤镜

设定R,G,B值相等

function makeGray(img){
 for(var pixel of img.values()){
  var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
  pixel.setRed(avg);
  pixel.setGreen(avg);
  pixel.setBlue(avg);
 }
 return img;
}

2.单色滤镜(以红色为例)

计算R,G,B的均值avg,判断avg是否小于128.

function makeRed(img){
 for(var pixel of img.values()){
  var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
  if(avg<128){
   pixel.setRed(2*avg);
   pixel.setGreen(0);
   pixel.setBlue(0);
  }
  else{
   pixel.setRed(255);
   pixel.setGreen(2*avg-255);
   pixel.setBlue(2*avg-255);
  }
 }
 return img;
}

3.彩色滤镜

function makeRainbow(img){
 for(var pixel of img.values()){
  var x = pixel.getX();
  var y = pixel.getY();
  var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
  var h = img.height;
  if(y<h/7){
   if(avg<128){
    pixel.setRed(2*avg);
    pixel.setGreen(0);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(2*avg-255);
    pixel.setBlue(2*avg-255);
   }
  }
  if(y>=h/7 && y<h*2/7){
   if(avg<128){
    pixel.setRed(2*avg);
    pixel.setGreen(0.8*avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(1.2*avg-51);
    pixel.setBlue(2*avg-255);
   }
  }
  if(y>=h*2/7 && y<h*3/7){
   if(avg<128){
    pixel.setRed(2*avg);
    pixel.setGreen(2*avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(255);
    pixel.setBlue(2*avg-255);
   }
  }
  if(y>=h*3/7 && y<h*4/7){
   if(avg<128){
    pixel.setRed(0);
    pixel.setGreen(2*avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(2*avg-255);
    pixel.setGreen(255);
    pixel.setBlue(2*avg-255);
   }
  }
  if(y>=h*4/7 && y<h*5/7){
   if(avg<128){
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(2*avg);
   }
   else{
    pixel.setRed(2*avg-255);
    pixel.setGreen(2*avg-255);
    pixel.setBlue(255);
   }
  }
  if(y>=5*h/7 && y<h*6/7){
   if(avg<128){
    pixel.setRed(0.8*avg);
    pixel.setGreen(0);
    pixel.setBlue(2*avg);
   }
   else{
    pixel.setRed(1.2*avg-51);
    pixel.setGreen(2*avg-255);
    pixel.setBlue(255);
   }
  }
  if(y>=h*6/7){
   if(avg<128){
    pixel.setRed(1.6*avg);
    pixel.setGreen(0);
    pixel.setBlue(1.6*avg);
   }
   else{
    pixel.setRed(0.4*avg+153);
    pixel.setGreen(2*avg-255);
    pixel.setBlue(0.4*avg+153);
   }
  }
 }
 return img;
}

4.模糊滤镜

(1)生成(0,1)之间的

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

Javascript 相关文章推荐
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
vue实现随机验证码功能(完整代码)
Dec 10 #Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 #Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 #Javascript
使用Bootstrap做一个朝代历史表
Dec 10 #Javascript
JS实现拼图游戏
Jan 29 #Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php中Ctype函数用法详解
2014/12/09 PHP
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python使用turtle库绘制时钟
2020/03/25 Python
python中map的基本用法示例
2018/09/10 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python随机模块random使用方法详解
2020/02/14 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
学校卫生检查制度
2014/02/03 职场文书
学习标兵获奖感言
2014/02/20 职场文书
经济担保书范文
2014/04/02 职场文书
销售团队获奖感言
2014/08/14 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
《社戏》教学反思
2016/02/22 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python