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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
拼音码表的生成
2006/10/09 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
如何基于python实现脚本加密
2019/12/28 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
励志演讲稿600字
2014/08/21 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
村党建工作汇报材料
2014/11/02 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server