여과는 가장 어려운 부분이 아닙니다

프로젝트를 맡았을 때 사진 처리를 통해 흑백/세피아 같은 필터를 만드는 것이 매우 어렵다고 생각했습니다. 모든 것이 더 간단해졌습니다!

아래에서는 이미지를 픽셀 스펙트럼으로 분해하고 사진을 처리하는 흥미로운 알고리즘을 제공합니다.

<h1>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="https://img.php.cn/upload/article/000/000/000/173352709543373.jpg" 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;
}

알고리즘의 본질은 다음과 같습니다.

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);
}

간단한 알고리즘인 것 같지만 색상 팔레트에 따른 이미지 픽셀 및 처리를 이해하는 데 도움이 됩니다. 관심을 가져볼만한 가치가 있다고 생각합니다!

위 내용은 여과는 가장 어려운 부분이 아닙니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!