GreyScale

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

Thumbnail
This awesome code was written by jpullifrone, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jpullifrone ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>GreyScale</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <title>Canvas File Uploader</title>
    <script
            src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
  </head>
    <body>
      <h2>My Canvas File Uploader</h2>
      
      <canvas id="can1"></canvas>
      <canvas id="can2"></canvas>
      
      <p>
      
        <input type="file"
               id="input1"
               multiple="false"
               accept="image/*">
        <input type="button"
               id="input2"
               value="Upload"
               onclick="upload()">
        <input type="button"
               id="input3"
               value="Make Grey"
               onclick="makeGrey()">
      </p>     
    </body> 
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jpullifrone/greyscale-wPpOLg */
canvas {
  width: 200pt;
  height: 100pt; 
  margin: 10px;
  border: 1px solid lightgrey;
  background-color: white;
}
input {
  font-size: 8pt;
}

p {
  font-size: 10pt;  
}

/*Downloaded from https://www.codeseek.co/jpullifrone/greyscale-wPpOLg */
var imageOrig;
var imageNew;

function upload() {
  var fileInput = document.getElementById("input1");
  imageOrig = new SimpleImage(fileInput);
  imageNew = new SimpleImage(fileInput);
  var imgcan = document.getElementById("can1");
  imageOrig.drawTo(imgcan); 
  
  
}

//what makes a pixel grey is when each of the RGB values are the same
function makeGrey() {
  for(var pixel of imageNew.values()) {
    var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);
  }
  var imgcan = document.getElementById("can2");
  imageNew.drawTo(imgcan); 
}

Comments