JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<input type="file" value="upload" multiple />

JavaScript

$(document).ready(function() {
  /////// 1. Select image with file input
  $('input').on('change', function() {
    resizeInCanvas(this.files[0], function(dataUrl) {
     
      // image is now a resized dataURL.  This can be sent up to the server using ajax where it can be recompiled into an image and stored.
       ////// 5 Upload to server as dataUrl
       uploadResizedImages(dataUrl);
    });
  });

  function resizeImages(file, complete) {
    // read file as dataUrl
    ////////  2. Read the file as a data Url
    var reader = new FileReader();
      // file read
      reader.onload = function(e) {
          // create img to store data url
          ////// 3 - 1 Create image object for canvas to use
          var img = new Image();
          img.onload = function() {
           /////////// 3-2 send image object to function for manipulation
            complete(resizeInCanvas(img));
          };
          img.src = e.target.result;
        }
        // read file
      reader.readAsDataURL(file);
   
  }

});
function resizeInCanvas(img){
  /////////  3-3 manipulate image
	var perferedWidth = 2700;
  var ratio = perferedWidth / img.width;
  var canvas = $("<canvas>")[0];
  canvas.width = img.width * ratio;
  canvas.height = img.height * ratio;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0,0,canvas.width, canvas.height);
  //////////4. export as dataUrl
  return canvas.toDataURL();
}

function uploadResizedImages (){
	return true;
}