过滤不是最难的部分

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《过滤不是最难的部分》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

当我接手这个项目时，我认为像黑白/棕褐色这样的滤镜很难通过照片处理来制作。一切都变得更简单！

下面我将给出一个有趣的算法，用于将图像分解为像素光谱并处理照片。

<h1>filter fun</h1>

<script src="https://www.dukelearntoprogram.com/course1/common/js/image/simpleimage.js"> </script>

<canvas id="can"></canvas>

<p> <b>
load image: &lt;input type=&quot;file&quot; multiple=&quot;false&quot; accept=&quot;image/*&quot; id=&quot;file&quot; onchange=&quot;loadimage()&quot;&gt;
</b> </p> 

&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;grayscale&quot; onclick=&quot;dogray()&quot;&gt;
&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;red&quot; onclick=&quot;dored()&quot;&gt;
&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;rainbow&quot; onclick=&quot;dorainbow()&quot;&gt;

 <p>
&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;reset image&quot; onclick=&quot;reset()&quot;&gt;
</p>

我暗示类似这样的事情（当然，任何文件）：

即使是最简单的设计，最好还是对齐。您将更快地掌握大型项目的窍门。

h1 {
  font-size: 22pt;
  font-family: arial;
  color: #008b8b;
}

body {
  background-color: #f5f5dc;
}

p {
  font-size: 16pt;
}

canvas {
  width: 400px;
  background-color: #add8e6;
  border: 2px solid #a9a9a9;
}

input {
  font-size: 12pt;
}

算法的本质如下：

1. 互联网上的任何图像都会分解为光谱：红、绿、蓝
2. 创建3个数组，存储图像中对应颜色的像素个数（详细函数见代码）​​
3. 选择滤镜时：依次处理3个数组以增加/减少调色板值

var imgFile;
var image = null;
var imageGray = null;
var imageRed = null;
var imageRainbow = null;
var canvas = null;

function loadImage(){
  canvas = document.getElementById("can");
  imgFile = document.getElementById("file");
  image = new SimpleImage(imgFile);
  imageGray = new SimpleImage(imgFile);
  imageRed = new SimpleImage(imgFile);
  imageRainbow = new SimpleImage(imgFile);
  image.drawTo(canvas);
}

function imageIsLoaded(img) {
  if (img==null || !img.complete()) {
    alert("Image not loaded");
    return false;
  }
  else {
    return true;
  }
}

function doGray(){ 
  if (imageIsLoaded(image)) {
    for (var pixel of imageGray.values()) {
      var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
      pixel.setRed(arg);
      pixel.setGreen(arg);
      pixel.setBlue(arg);
    }                  
    imageGray.drawTo(canvas);            
  }
}

function doRed(){
  if (imageIsLoaded(image)) {
    for (var pixel of imageRed.values()) {
      var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
      if (arg < 128) {
        pixel.setRed(arg*2);
        pixel.setGreen(0);
        pixel.setBlue(0);
      }
      else {
        pixel.setRed(255);
        pixel.setGreen(arg*2-255);
        pixel.setBlue(arg*2-255);
      }
    }                      
    imageRed.drawTo(canvas);             
  }
}

function doRainbow(){
  if (imageIsLoaded(image)) {     

    imageRainbow.drawTo(canvas);             
  }
}

function Reset(){
  image = new SimpleImage(imgFile);
  imageGray = new SimpleImage(imgFile);
  imageRed = new SimpleImage(imgFile);
  imageRainbow = new SimpleImage(imgFile);
  image.drawTo(canvas);
}

这似乎是一个简单的算法，但它有助于理解图像像素并根据调色板进行处理。我认为它值得你关注！

今天关于《过滤不是最难的部分》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！