JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br>
<img id="img"/>

<canvas id="cnimage" height="500px" width="500px"></canvas>

JavaScript

function preview(file) {
 if (file) {
  var reader = new FileReader()
  reader.readAsDataURL(file);
  reader.onloadend = function() {
   document.getElementById("img").src = reader.result;
   var canvas = document.getElementById('cnimage');
   var ctx = canvas.getContext('2d');
   ctx.filter = "grayscale(100%)"
   var img = document.getElementById("img");
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

   anchor = document.createElement('a');
   document.body.appendChild(anchor);
   anchor.download = name;
   var data = canvas.toDataURL("image/png");
   anchor.href = data;
   anchor.click();
  }
 }
}