jquery - Resizing image before upload -
i putting html+js code resize picture before automatically submitting form server. wrote code automatic form submission , added logic image resizing. automatic form submission works image resizing not working. please provide guidance. thank in advance.
<!doctype html> <html> <head> <title>flask app</title> <meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script type="text/javascript"> $(function(){ //js code snippet 1 - automatic form submission on file selection $("#file_select").change(function(){ $("#upload_form").submit(); $("#upload_form_div").hide(); $("#loading").show(); //js code snippet 2 - image resizing var filestoupload = inputs.files; var img = document.createelement("img"); var reader = new filereader(); reader.onload = function(e) {img.src = e.target.result} reader.readasdataurl(file); var ctx = canvas.getcontext("2d"); ctx.drawimage(img, 0, 0); var max_width = 800; var max_height = 600; var width = img.width; var height = img.height; if (width > height) { if (width > max_width) { height *= max_width / width; width = max_width; } } else { if (height > max_height) { width *= max_height / height; height = max_height; } } canvas.width = width; canvas.height = height; var ctx = canvas.getcontext("2d"); ctx.drawimage(img, 0, 0, width, height); var xhr = new xmlhttprequest(); xhr.open("post", "upload"); xhr.send(ctx.todataurl()); }); }); </script> </head> <body> <h1 class="logo">upload picture</h1> <div id="upload_form_div"> <form id="upload_form" method="post" enctype="multipart/form-data" action="upload"> <input type="file" name="file" capture="camera" id="file_select"/> </form> </div> <div id="loading" style="display:none;"> uploading picture... </div> </body> </html> updates - (3/28/2014) -combined code @yuhua , 'uploader' function in jic library. updated code below
when open webapp in chrome browser on laptop, works fine. however, resized image not coming out expected when upload image camera opening webapp in chrome browser on iphone 4s. please find below original , resized image. please correct doing wrong.
$("#file_select").change(function (e) { var filereader = new filereader(); filereader.onload = function (e) { var img = new image(); img.onload = function () { var max_width = 3264; var max_height = 2448; var width = img.width; var height = img.height; if (width > height) { if (width > max_width) { height *= max_width / width; width = max_width; } } else { if (height > max_height) { width *= max_height / height; height = max_height; } } var canvas = document.createelement("canvas"); canvas.width = width; canvas.height = height; canvas.getcontext("2d").drawimage(this, 0, 0, width, height); this.src = canvas.todataurl(); //document.body.appendchild(this);//remove if don't want show var newimagedata = canvas.todataurl("image/png", 70/100); var result_image_obj = new image(); result_image_obj.src = newimagedata; //======= step 2 - upload compressed image server ========= //here set params endpoint, var name (server side) , filename var server_endpoint = 'upload', server_var_name = 'file', filename = "new.jpg"; //this callback triggered once upload completed var callback = function(response){ console.log(response); } //here goes magic $("#result").load(jic.upload(result_image_obj, server_endpoint, server_var_name, filename, callback)); } img.src = e.target.result; console.log(img); } filereader.readasdataurl(e.target.files[0]); }); 
i think browser might not supported .mozgetasfile(). , modified code example here:
$("#file_select").change(function (e) { var filereader = new filereader(); filereader.onload = function (e) { var img = new image(); img.onload = function () { var max_width = 100; var max_height = 100; var width = img.width; var height = img.height; if (width > height) { if (width > max_width) { height *= max_width / width; width = max_width; } } else { if (height > max_height) { width *= max_height / height; height = max_height; } } var canvas = document.createelement("canvas"); canvas.width = width; canvas.height = height; canvas.getcontext("2d").drawimage(this, 0, 0, width, height); this.src = canvas.todataurl(); document.body.appendchild(this);//remove if don't want show } img.src = e.target.result; } filereader.readasdataurl(e.target.files[0]); }); this reference: outputting html5 canvas image, howto?
update:
take bottom of page (browser support)
https://developer.mozilla.org/en-us/docs/web/api/htmlcanvaselement
Comments
Post a Comment