Resize image by html5 canvas

image_resize.js

// http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload

var IMGRZ_MAX_WIDTH = 500;

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

function resizeImage(readerEvent, callback){
  var image = new Image();
  image.onload = function (imageEvent) {
      // Resize the image
      var canvas = document.createElement('canvas'),
          max_size = IMGRZ_MAX_WIDTH,
          width = image.width,
          height = image.height;
      if (width > height) {
          if (width > max_size) {
              height *= max_size / width;
              width = max_size;
          }
      } else {
          if (height > max_size) {
              width *= max_size / height;
              height = max_size;
          }
      }
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(image, 0, 0, width, height);
      var dataUrl = canvas.toDataURL('image/jpeg');
      var resizedImage = dataURLToBlob(dataUrl);
      callback({
          type: "imageResized",
          blob: resizedImage,
          url: dataUrl
      });
  }
  image.src = readerEvent.target.result;
}

resize.html

<input id='myFile' type='file'>
<br />
<img id='myImg'>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src='./image_resize.js'></script>

<script>

  window.uploadPhotos = function(url){
      // Read in file
      var file = event.target.files[0];

      // Ensure it's an image
      if(file.type.match(/image.*/)) {

          var reader = new FileReader();

          reader.onload = function(readerEvent) {
            resizeImage(readerEvent, function(result){
              $('#myImg').attr('src', result.url);
            });
          }

          reader.readAsDataURL(file);
      }
  };

  $('#myFile').change(function(){
    uploadPhotos();
  });

</script>