JSFiddle - React, Tailwind, and code Playground

HTML

<form>
      <input type="file" name="testImg" id="testImg" />
    </form>
    <button id="testButton">Test</button>
    <canvas id="testCanvas" style="border: 1px solid black;">Your Browser does not support canvas</canvas>
    <br />
    <fieldset>
      <legend>Image Data</legend>
      <textarea id="imageString"></textarea>
      
      <img id="imageOutput" src="" />
    </fieldset>
  </body>

JavaScript

//Get the canvas
        var canvas = document.getElementById('testCanvas');
        var context = canvas.getContext('2d');   
        
        $("#testButton").click(function(){
          var base_image = new Image();
          
          base_image.src = $("#testImg").val();
          //base_image.src = '1.jpg';
          
          //When the image loads
          $(base_image).load(function(){
            //Resize canvas for image
            $("#testCanvas").attr({
              width: base_image.width,
              height: base_image.height
            });
            
            //Draw image on canvas
            context.drawImage(base_image, 0, 0);
            
            //Get base64 encoded image
            var imageString = canvas.toDataURL("image/jpeg");
            $("#imageString").val(imageString);
            
            //alert($("#imageString").val().length);
            $("#imageOutput").attr("src", imageString);
          });
        });