coursera mini proj JS

coursera-mini-proj-js.markdown

coursera mini proj JS

A Pen by suhaasteja on CodePen.

License.

index.html

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

<h1> Coursera MiniProject Part1 </h1>

<canvas id="canvasID"> </canvas>

<p>
  Choose and upload your image :
<input type="file" multiple="false" onclick="uploadFile()" id="fInput">
</p>

<p>
  Choose a filter:
  <input type="button" value="rainbow" onclick="rainbowFilter()">
  
  <input type="button" value="red" onclick="redFilter()">

<p>
  Reset button:
  <input type="button" value="reset" onclick="resetButton()">
</p>

script.js

var image;

function uploadFile(){
  var canvasElement = document.getElementById("canvasID");
  var fElem = document.getElementById("fInput");
  image = new SimpleImage(fElem);
  image.drawTo(canvasElement);
}

function rainbowFilter(){
  var canvasElement = document.getElementById("canvasID");
  w=image.getWidth();
  h=image.getHeight();
  for( var pixel of image.values())
    {
      x=pixel.getX();
      y=pixel.getY();
      if(y<h/7)
        {
          pixel.setRed(127);
          pixel.setBlue(255);
        }
       if(y>(h/7)&&y<(2*h/7))
        {
          pixel.setRed(75);
          pixel.setBlue(130);
        }
       if(y>(2*h/7)&&y<(3*h/7))
        {
          pixel.setBlue(255);
        }
       if(y>(3*h/7)&&y<(4*h/7))
        {
          pixel.setGreen(255);
        }
       if(y>(4*h/7)&&y<(5*h/7))
        {
          pixel.setRed(255);
          pixel.setGreen(255);
        }
       if(y>(5*h/7)&&y<(6*h/7))
        {
          pixel.setRed(255);
          pixel.setGreen(215);
        }
       if(y>(6*h/7)&&y<(7*h/7))
        {
          pixel.setRed(255);
        }   
    }
  image.drawTo(canvasElement);
}

function redFilter(){
  var canvasElement = document.getElementById("canvasID"); 
  for( var pixel of image.values()){
    pixel.setRed(255);
  }
  image.drawTo(canvasElement);
}

function resetButton(){
  uploadFile();
}

style.css

*{
  background-color:lightgreen;
}

canvas{
  width:300px;
  height:300px;
  border:1px solid grey;
}