javascript - Use HTML5 to resize an image before upload -
i have found few different posts , questions on stackoverflow answering question. implementing same thing this post.
so here issue. when upload photo, need submit rest of form. here html:
<form id="uploadimageform" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takepicturefield" accept="image/*" onchange="uploadphotos(\'#{imageuploadurl}\')" /> <input id="name" value="#{name}" /> ... few more inputs ... </form> previously, did not need resize image, javascript looked this:
window.uploadphotos = function(url){ var data = new formdata($("form[id*='uploadimageform']")[0]); $.ajax({ url: url, data: data, cache: false, contenttype: false, processdata: false, type: 'post', success: function(data){ ... handle error... } } }); }; this worked great... need resize images... how can replace image in form resized 1 posted , not uploaded image?
window.uploadphotos = function(url){ var resizedimage; // read in file var file = event.target.files[0]; // ensure it's image if(file.type.match(/image.*/)) { console.log('an image has been loaded'); // load image var reader = new filereader(); reader.onload = function (readerevent) { var image = new image(); image.onload = function (imageevent) { // resize image var canvas = document.createelement('canvas'), max_size = 1200, 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); resizedimage = canvas.todataurl('image/jpeg'); } image.src = readerevent.target.result; } reader.readasdataurl(file); } // todo: need logic here switch out photo being posted... var data = new formdata($("form[id*='uploadimageform']")[0]); $.ajax({ url: url, data: data, cache: false, contenttype: false, processdata: false, type: 'post', success: function(data){ ... handle error... } } }); }; i've thought moving file input out of form , having hidden input in form set value of value of resized image... i'm wondering if can replace image in form.
here ended doing , worked great.
first moved file input outside of form not submitted:
<input name="imagefile[]" type="file" id="takepicturefield" accept="image/*" onchange="uploadphotos(\'#{imageuploadurl}\')" /> <form id="uploadimageform" enctype="multipart/form-data"> <input id="name" value="#{name}" /> ... few more inputs ... </form> then changed uploadphotos function handle resizing:
window.uploadphotos = function(url){ // read in file var file = event.target.files[0]; // ensure it's image if(file.type.match(/image.*/)) { console.log('an image has been loaded'); // load image var reader = new filereader(); reader.onload = function (readerevent) { var image = new image(); image.onload = function (imageevent) { // resize image var canvas = document.createelement('canvas'), max_size = 544,// todo : pull max size site config 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); $.event.trigger({ type: "imageresized", blob: resizedimage, url: dataurl }); } image.src = readerevent.target.result; } reader.readasdataurl(file); } }; as can see i'm using canvas.todataurl('image/jpeg'); change resized image dataurl adn call function dataurltoblob(dataurl); turn dataurl blob can append form. when blob created, trigger custom event. here function create blob:
/* utility function convert canvas 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); (var = 0; < rawlength; ++i) { uint8array[i] = raw.charcodeat(i); } return new blob([uint8array], {type: contenttype}); } /* end utility function convert canvas blob */ finally, here event handler takes blob custom event, appends form , submits it.
/* handle image resized events */ $(document).on("imageresized", function (event) { var data = new formdata($("form[id*='uploadimageform']")[0]); if (event.blob && event.url) { data.append('image_data', event.blob); $.ajax({ url: event.url, data: data, cache: false, contenttype: false, processdata: false, type: 'post', success: function(data){ ... handle errors... } }); } });
Comments
Post a Comment