我正在编写HTML+JS代码，以便在自动提交表单到服务器之前先调整图片大小。我最初为自动提交表单编写了代码，然后添加了图像调整逻辑。自动提交表单可以正常工作，但是图像调整不能正常工作。请提供指导。谢谢您的帮助。
<!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>
更新 - （2014年3月28日） -合并了@yuhua和“上传者”功能的代码JIC库。更新后的代码如下：
当我在笔记本电脑的Chrome浏览器中打开我的Web应用程序时，一切正常。但是，当我通过在iPhone 4s上使用Chrome浏览器打开我的Web应用程序来上传照片时，我的调整大小的图像并未按预期显示出来。请查看下面的原始图像和调整大小后的图像。请纠正我做错的地方。
$("#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]);
});
xhr.open("POST", "upload", true);- yuhua$.ajax()代替xhr，并在最后一行调用表单提交：$("#upload_form").submit();- yuhua