JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<input id="file" type="file"/>
  <br/>
  <br/>
  <button id="button">Evaluate

JavaScript

document.getElementById('button').addEventListener('click', function() {
  var files = document.getElementById('file').files;
  if (files.length > 0) {
    //getBase64(files[0]);
		imageToDataUri(files[0], 1200, 1200);
  }
});

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
		 window.localStorage.setItem("img", reader.result)
   };
}


function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}