crop-image.js

var imageQuality = 0.7;
var scale = 0.35;

$container =  $('#resize' + id + 'Container');
var crop_canvas,
    left = $('#pic' + id + 'Overlay').offset().left - $container.offset().left,
    top =  $('#pic' + id + 'Overlay').offset().top - $container.offset().top,
    width = $('#pic' + id + 'Overlay').width(),
    height = $('#pic' + id + 'Overlay').height();

crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;

// Rescale left and top corner
left = (left/scale);
top = (top/scale);

crop_canvas
  .getContext('2d')
  .drawImage(
    $('#pic' + id + "Preview").get(0), 
    left, top, width, height, 0, 0, width, height
  );

// Converts image from URI to file for upload
function dataURItoBlob(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

var imgL = crop_canvas.toDataURL("image/jpeg", imageQuality),