Build a Colored Image to Grayscale Black and White Image Converter Web App in Browser Using Vanilla Javascript Full Project For Beginners

Build a Colored Image to Grayscale Black and White Image Converter Web App in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a colored image to grayscale black and white image converter web app in browser using vanilla javascript.All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<html>
 <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" >
</script>
 <h1>Upload an Image! And convert it to greyscale!</h1>
  <h3>Hello all! this is a prototype i made of a webpage where the user can select and upload a file from their computer, then turn that image into greyscale (black and white)</h3> <h3> if you do not have and image file on your computer, you can download one <a href="https://stock.adobe.com/premium/sss2Y3VeqpduB3fu4h19WCIrnV34PKD7" target="blank"> here</a></h3>
  <h2>NOTE: the canvas will change size to host the image you select.</h2>
  
  
  <canvas id = "can">
  </canvas>
<canvas id = "can2">
  </canvas>
  
  <p> choose file: 
  <input type = "file" multiple = "false" accept = image/* id = "finput" onchange = upload()>
  <input type = "button" value = "make gray" onclick = "doGrey()"
   </p>

 

See also  Build a Badminton Court Design in Browser Using HTML5 and CSS3 Grid Full Project For Beginners

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

body {
  background-color: #42ebf4;
   margin: 40px;
}
canvas {
  width: 5000;
  height: 900;
  border: 3px solid #4c3939;
}
h1 {
  text-align: center;
  color:#4245f4 ;
}
p {
  color: #1ea7bf;
}
input {
  font-size: 20pt;
}

 

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

var image = null;

function upload() {
  var fileinput = document.getElementById("finput");
  //Make new SimpleImage from file input
  image = new SimpleImage(fileinput);
  //Get canvas
  var canvas = document.getElementById("can");
  //Draw image on canvas
  image.drawTo(canvas);
}
function doGrey() {
  for (var px of image.values()){
    var avg = (px.getRed()+px.getGreen()+px.getBlue() )/3;
    px.setRed(avg);
    px.setGreen(avg);
    px.setBlue(avg);
  }
    var canvas = document.getElementById("can2");
    image.drawTo(canvas);
  
}

 

 

 

Now if you open index.html file inside the browser you will see the below screenshot

 

 

 

 

 

Leave a Reply