Die Filtration ist nicht der schwierigste Teil

Als ich das Projekt übernahm, dachte ich, dass Filter wie Schwarzweiß/Sepia durch Fotobearbeitung sehr schwierig herzustellen seien. Alles ist einfacher!

Im Folgenden werde ich einen interessanten Algorithmus zum Zerlegen eines Bildes in Pixelspektren und zum Verarbeiten von Fotos vorstellen.

<h1 id="Filter-Fun">Filter Fun</h1>

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

<canvas>



<p>I'm hinting at something like this (naturally, any file):<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173352709543373.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Filtration isn"></p>

<p>It is better to align even the simplest design. You will get the hang of big projects faster.<br>
</p>

<pre class="brush:php;toolbar:false">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;
}

Das Wesentliche des Algorithmus ist wie folgt:

1. Jedes Bild im Internet wird in ein Spektrum zerlegt: Rot, Grün, Blau
2. Erstellen Sie 3 Arrays, die die Anzahl der Pixel der entsprechenden Farbe im Bild speichern (detaillierte Funktion im Code)
3. Bei der Auswahl eines Filters: Verarbeiten Sie nacheinander 3 Arrays, um den Farbpalettenwert hinzuzufügen/zu verringern

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 



<p>Es scheint ein einfacher Algorithmus zu sein, aber er hilft, die Bildpixel und die Verarbeitung entsprechend der Farbpalette zu verstehen. Ich denke, es verdient Ihre Aufmerksamkeit!</p>


          

            
        

Das obige ist der detaillierte Inhalt vonDie Filtration ist nicht der schwierigste Teil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!