I am putting together HTML+JS code to resize picture before automatically submitting form to the server. I initially wrote code for automatic form submission and then added logic for image resizing. Automatic form submission works but image resizing is not working. Please provide guidance. Thank you 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 your picture...
</div>
</body>
</html>
UPDATES - (3/28/2014) -Combined code from @yuhua and 'uploader' function in JIC library. Updated code is below
When I open my webapp in chrome browser on laptop, everything works fine. However, my resized image is not coming out as expected when I upload image from camera by opening my webapp in chrome browser on iPhone 4s. Please find below original and resized image. Please correct what I am 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 this if you don't want to show it
var newImageData = canvas.toDataURL("image/png", 70/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
//======= Step 2 - Upload compressed image to server =========
//Here we set the params like endpoint, var name (server side) and filename
var server_endpoint = 'upload',
server_var_name = 'file',
filename = "new.jpg";
//This is the callback that will be triggered once the upload is completed
var callback = function(response){ console.log(response); }
//Here goes the 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]);
});
