greylin scales

In this example below you will see how to do a greylin scales with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DanniAsoma, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DanniAsoma ©
  • HTML
  • CSS
  • JavaScript
    <h1> the image uploadeer pages </h1>
<div>
<script src = "http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script>
  </div>

<canvas id = "d1">
</canvas>

<div>
  <input type = "text" id = "finput">
  <input type = "button" value = "Upload! (doesn't work)" onclick = "upload()">
</div>

<canvas id = "c2">
</canvas>

<p>
  <input type = "file" multiple = "false" accept = "image/*" id = "finput2" onchange = "upload2()">
</p>
  <p>
    <input type = "button" value = "Make Greylin Scales" onclick = "grayscale()">
  </p>
  <canvas id = "c3">
  </canvas>

/*Downloaded from https://www.codeseek.co/DanniAsoma/greylin-scales-bRWBya */
    canvas {
  border: 2px dotted gray;
  margin-left: 100px;
}
div {
  margin-left:100px;
}

p {
  margin-left: 100px;
}


/*Downloaded from https://www.codeseek.co/DanniAsoma/greylin-scales-bRWBya */
    function upload() {
  var fileinput = document.getElementById("finput");
  var filename = fileinput.value;
  alert("Chose " + filename);
}

var image;
//global variable!

function upload2() {
  var canvas = document.getElementById("c2");
  var disimage = document.getElementById("finput2");
  image = new SimpleImage(disimage);
  image.drawTo(canvas);
}

function grayscale() {
  for (var pixel of image.values()) {
    var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);
  }
  var imgcanvas = document.getElementById("c3");
  image.drawTo(imgcanvas);
}

Comments