主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了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(2avg);
   pixel.setGreen(0);
   pixel.setBlue(0);
  }
  else{
   pixel.setRed(255);
   pixel.setGreen(2avg-255);
   pixel.setBlue(2avg-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(2avg);
    pixel.setGreen(0);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(2avg-255);
    pixel.setBlue(2avg-255);
   }
  }
  if(y>=h/7 && y<h2/7){
   if(avg<128){
    pixel.setRed(2avg);
    pixel.setGreen(0.8avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(1.2avg-51);
    pixel.setBlue(2avg-255);
   }
  }
  if(y>=h2/7 && y<h3/7){
   if(avg<128){
    pixel.setRed(2avg);
    pixel.setGreen(2avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(255);
    pixel.setGreen(255);
    pixel.setBlue(2avg-255);
   }
  }
  if(y>=h3/7 && y<h4/7){
   if(avg<128){
    pixel.setRed(0);
    pixel.setGreen(2avg);
    pixel.setBlue(0);
   }
   else{
    pixel.setRed(2avg-255);
    pixel.setGreen(255);
    pixel.setBlue(2avg-255);
   }
  }
  if(y>=h4/7 && y<h5/7){
   if(avg<128){
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(2avg);
   }
   else{
    pixel.setRed(2avg-255);
    pixel.setGreen(2avg-255);
    pixel.setBlue(255);
   }
  }
  if(y>=5h/7 && y<h6/7){
   if(avg<128){
    pixel.setRed(0.8avg);
    pixel.setGreen(0);
    pixel.setBlue(2avg);
   }
   else{
    pixel.setRed(1.2avg-51);
    pixel.setGreen(2avg-255);
    pixel.setBlue(255);
   }
  }
  if(y>=h6/7){
   if(avg<128){
    pixel.setRed(1.6avg);
    pixel.setGreen(0);
    pixel.setBlue(1.6avg);
   }
   else{
    pixel.setRed(0.4avg+153);
    pixel.setGreen(2avg-255);
    pixel.setBlue(0.4avg+153);
   }
  }
 }
 return img;
}

4.模糊滤镜

（1）生成（0，1）之间的

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

上一篇：使用原生JS实现火锅点餐小程序（面向对象思想） 下一篇：vue仿淘宝滑动验证码功能(样式模仿)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by