JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<h1 class="logo">Upload Picture</h1>
<div id="upload_form_div">
  <form id="upload_form" method="POST" enctype="multipart/form-data" action="upload">
    <input type="file" name="file" capture="camera" id="file_select" />
  </form>
</div>

<div id="loading" style="display:none;">
  Uploading your picture...
</div>

JavaScript

let canvas;
let array_WH = new Array();
let percent = 50;
let img = new Image();

$(function() {

  function ff(height, width, percentage) {

    var newHeight = height * (percentage / 100);

    var newWidth = width * (percentage / 100);

    return [newWidth, newHeight];
  }

  $("#file_select").change(function(e) {

    var fileReader = new FileReader();

    fileReader.onload = function(e) {



      img.onload = function() {

        array_WH = ff(img.height, img.width, percent); //Pavel: changed order to correct

        console.log('old width: ' + img.width);
        console.log('new width: ' + array_WH[0]);

        width = array_WH[0];

        height = array_WH[1];

        if (canvas) return;

        canvas = document.createElement("canvas");

        canvas.width = width;

        canvas.height = height;

        canvas.getContext("2d").drawImage(this, 0, 0, width, height);

        // //Line added
        //var canvasData = canvas.toDataURL(); //Pavel: also for  png can be: toDataURL("image/png");
        var canvasData = canvas.toDataURL('image/jpeg', 0.5);//Pavel: sec param is quality from 0 to 1
        // //Line edited
        this.src = canvasData;
        // //Line added
        console.log(canvasData.length * 3 / 4, ' bytes');

        document.body.appendChild(this); //remove this if you don't want to show it

      }

      img.src = e.target.result;

    }

    fileReader.readAsDataURL(e.target.files[0]);

  });

});