JSFiddle - React, Tailwind, and code Playground

by Raj Shekhar

HTML

<input type="file">

JavaScript

const input = document.querySelector('input');
input.addEventListener('change',function(){
	const reader = new FileReader();
  reader.onload = function(){
  	console.log(reader.result);
    const img = new Image();
    img.onload = function () {
    	const canvas = document.createElement('canvas');
      const context  = canvas.getContext('2d');
      context.drawImage(img, 0 ,0);
      const imageData= context.getImageData(0,0, canvas.width, canvas.height);
      const data = imageData.data;
      for(var i=0; i<= data.length; i+= 4){
      	const avg = (data[i] + data[i+1]+data[i+2])/3;
        data[i]  = avg;
        data[i+1] =avg;
        data[i+2]=avg;
      }
      context.putImageData(imageData,0,0)
      canvas.toBlob(function(blob){
      	console.log('blob:::::',blob)
      })
      document.body.appendChild(canvas)
    };
    img.src  = reader.result;//base64
    //document.body.appendChild(img)
  }
  reader.readAsDataURL(input.files[0])
},false)