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

这篇文章主要介绍了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）之间的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像 滤镜原理解释: 1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为 复制代码 代码如下: newr = (r * 0.272) + (g

  • js canvas实现画图、滤镜效果

    js canvas实现画图、滤镜效果

    本文实例为大家分享了canvas实现画图.滤镜效果的具体代码,供大家参考,具体内容如下 1.用canvas来实现画图的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style media="screen"> body {backg

  • nodejs中各种加密算法的实现详解

    nodejs中各种加密算法的实现详解

    前言 在大前端的趋势下,前端er也要懂点数据加密相关的知识才行,加密算法的实现和原理我们可以不用深究,毕竟加密是一门高深的学科,但是基本的加密方式和编码还是要掌握的,毕竟没吃过猪肉,猪跑还是见过的嘛. 我对常见的几种加密和签名的算法做个归纳,同时附上 nodejs 的编码实现. 加密算法 为了保证数据的安全性和防篡改,很多数据在传输中都进行了加密.举个场景的栗子,最近很多网站都升级到 https 协议, https 协议就是使用了非对称加密和hash签名,还有 github 使用的 ssh ,也

  • JS实现的排列组合算法示例

    JS实现的排列组合算法示例

    本文实例讲述了JS实现的排列组合算法.分享给大家供大家参考,具体如下: 在数学中有排列组合,用来计算概率. 比如:从4个数字中,任意选择两个的情况.从5个数字中任意选择3个数字的情况.(这里我们只考虑没有顺序的情况). 公式:C(n,m)=n!/[m!(n-m)!]=n*(n-1)*...*(n-m+1)/[1*2*...*m],如C(5,2)=[5*4]/[1*2]=10. 举例说明:有 1,2,3,4 四个数字,从这四个数字中,任意选择两个数字一共有多少种情况:[1,2], [1,3], [

  • JS中的算法与数据结构之集合(Set)实例详解

    本文实例讲述了JS中的算法与数据结构之集合(Set).分享给大家供大家参考,具体如下: 集合(Set) 同数学中所学的一样,集合(Set)是由一组无序但彼此之间又有一定关系性的成员构成,每个成员在集合中只能出现一次,不同于我们之前说的字典,链表之类的,它是一种包含了不同元素的数据结构(集合中的元素称为成员),从其定义中我们可以看出它具有两个很重要的特征:首先,集合中的成员是无序的,其次,集合中的成员是不相同的,即集合中不存在相同的成员. 实际上,很多编程语言中,集合并不是一种数据类型,但是如果你

  • JS中的算法与数据结构之列表(List)实例详解

    本文实例讲述了JS中的算法与数据结构之列表(List).分享给大家供大家参考,具体如下: 前言 前端很少有机会接触到算法,大多都交互性的操作,所以不少前端工程师会抱着这么一种想法:我是做前端的,为什么要学数据结构与算法?没有数据结构与算法,我一样很好的完成工作.实际上,算法是一个宽泛的概念,我们平时写的任何代码都可以成为算法,它是对一个问题的解决方案的准确而完整的描述,是解决一系列问题的清晰指令,它代表着用系统的方法描述解决问题的策略机制.随着现在互联网的飞速发展,前端工程师已不是靠几个选择器操

  • tweenjs缓动算法的使用实例分析

    本文实例讲述了tweenjs缓动算法的使用.分享给大家供大家参考,具体如下: 这里的tweenjs不是依托于createjs的tewwnjs,而是一系列缓动算法集合.因为本身是算法,可以用在各个业务场景中,这也正是总结学习它的价值所在.tweenjs代码详情: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value(变化量): * d: duration(持续时间). * you

  • JS中的算法与数据结构之字典(Dictionary)实例详解

    本文实例讲述了JS中的算法与数据结构之字典(Dictionary).分享给大家供大家参考,具体如下: 字典(Dictionary) 字典(Dictionary)是一种以 键-值对 形式存储数据的数据结构 ,就如同我们平时查看通讯录一样,要找一个电话,首先先找到该号码的机主名字,名字找到了,紧接着电话号码也就有了.这里的键就是你用来查找的东西,本例中指代的就是名字,值就是查找得到的结果,也就是对应的电话号码. 其实,JavaScript 中的 Object 类就是以字典的形式设计的,下面我们将会借

  • js模拟滤镜的图片渐显效果

    无标题文档 #pshow{margin:auto;width:180px;height:137px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} /*ImageChange Start*/ var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=4,nowImage,startOpacity; var imageLink=new Array

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

    这篇文章主要介绍了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.setGree

  • JavaScript删除指定子元素代码实例

    原生javascript删除指定子元素代码实例: 本章节介绍一下如何利用原生javascript实现删除指定子元素. 大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍. 关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节. 代码实例: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title&

  • Java二分查找算法实现代码实例

    这篇文章主要介绍了Java二分查找算法实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 二分查找: 两种方式: 非递归方式和递归方式 主要思路: 对于已排序的数组(先假定是从小到大排序), 先定义两个"指针", 一个"指向"首元素low, 一个"指向"末尾元素high. 然后, 开始折半比较, 即让要查找的数与数组中间的元素(索引为 low+high/2)比较. 若要查找的数比中间数小

  • JavaScript实现文件下载并重命名代码实例

    这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • JavaScript遍历数组的方法代码实例

    这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 for循环 let arr=["A","B","C","D","E","F"]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); } for...of 遍历出数组中的每

  • Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect

  • JavaScript程序设计高级算法之动态规划实例分析

    本文实例讲述了JavaScript程序设计高级算法之动态规划.分享给大家供大家参考,具体如下: 主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for语句,swith语句等等,就可以解决了.稍微复杂的,可能会想到用递归去的解决. 但要注意的是递归写起来简洁,但实际上执行的效率并不高. 我们再看看动态规划的算法: 动态规划解决方案从底部开始解决问题, 将所有小问题

  • javascript自然分类法算法实现代码

    复制代码 代码如下: <!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"><meta name="viewport"content="initial-scale=1, maximum

  • 基于JavaScript实现十五拼图代码实例

    顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-size: 14pt; text-align: center; } #puzzlearea { height: 400px; margin: 0 auto; position: relative; width: 400px; } .highlight { border-color: red; curs

随机推荐