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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
英语自荐信范文
2013/12/11 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
党员教师工作决心书
2014/03/13 职场文书
机关单位动员会主持词
2014/03/20 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
销售竞赛活动方案
2014/08/23 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
车辆年审委托书范本
2014/09/18 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
社区党支部承诺书
2015/04/29 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers