Use HTML5 to resize an image before upload
From: http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload https://github.com/rossturner/HTML5-ImageUploader <input name = "imagefile[]" type = "file" id = "takePictureField" accept = "image/*" onchange = " uploadPhotos ( \' #{ imageUploadUrl } \' ) " /> <form id = "uploadImageForm" enctype = "multipart/form-data" > <input id = "name" value = "#{name}" /> ... a few more inputs ... </form> window . uploadPhotos = function ( url ){ // Read in file var file = event . target . files [ 0 ]; // Ensure it's an image if ( file . type . match ( /image.*/ )) { console . log ( 'An image has been loaded' ); // Load the image var reader = new FileReader (); reader . onload = function ( readerEvent ) { var image = new Image...