使用JavaScript怎么實(shí)現(xiàn)一個(gè)濾鏡算法

今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)濾鏡算法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

1.灰色濾鏡

設(shè)定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.單色濾鏡（以紅色為例）

計(jì)算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;
}

看完上述內(nèi)容，你們對(duì)使用JavaScript怎么實(shí)現(xiàn)一個(gè)濾鏡算法有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。