doGrew

doGrew.markdown

abNbmXy

A Pen by Justin Shi on CodePen.

License.

index.html

<script src = "https://www.dukelearntoprogram.com//course1/common/js/image/SimpleImage.js">
</script>
<h1>Image Practice</h1>
<canvas id = "cans"></canvas>
<p>
  Filename
  <input type = "file" multiple = "false" accept = "image/*" id = "input" onchange = "upload()" >
  <input type = "button" value = "make grew" id = "grew" onclick = "doGrew()">
</p>

script.js

var img;
function upload(){
  var fileinput = document.getElementById("input");
  var canvas = document.getElementById("cans");
  img = new SimpleImage(fileinput);
  img.drawTo(canvas);
}
function doGrew(){
  for(var pixel of img.values()){
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
    pixel.setRed(average);
    pixel.setGreen(average);
    pixel.setBlue(average);
  }
  var canvas = document.getElementById("cans");
  img.drawTo(canvas);
}

style.css

#input{
  width:225px;
  font-size: 12pt;
}
#grew{
  font-size: 12pt;
}
canvas{
  height:200px;
  width:350px;
  border: 1px solid lightgrey;
}