Le redimensionnement d'image avant de la télécharger
Je mets ensemble HTML+JS code de redimensionnement de l'image automatiquement avant de soumettre le formulaire au serveur. J'ai d'abord écrit le code pour le réglage automatique de la soumission du formulaire, puis ajouté logique pour le redimensionnement d'image. Automatique de la soumission du formulaire fonctionne, mais le redimensionnement d'image ne fonctionne pas. Veuillez fournir des conseils. Je vous remercie à l'avance.
<!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>MISES à jour - (3/28/2014)
-Code de @yuhua et 'uploader' dans JIC bibliothèque. Mis à jour le code est ci-dessous
Quand j'ouvre mon application web dans le navigateur google chrome sur l'ordinateur portable, tout fonctionne bien. Cependant, mon image ne vient pas comme prévu lorsque j'ai télécharger l'image de la caméra par l'ouverture de ma webapp dans le navigateur google chrome sur iPhone 4s. Veuillez trouver ci-dessous l'original et de l'image redimensionnée. Merci de corriger ce que je fais de mal.
$("#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]);
});
OriginalL'auteur user1146904 | 2014-03-25
Vous devez vous connecter pour publier un commentaire.
Je pense que votre navigateur peut ne pas être pris en charge avec
.mozGetAsFile(). et j'ai modifié ton code pour un exemple ici:c'est une référence: la sortie HTML5 canvas comme une image, howto?
Mise à JOUR:
Prendre un coup d'oeil en bas de page (prise en charge du Navigateur)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
essayez cette
xhr.open("POST", "upload", true);Il n'a pas de travail. Le formulaire n'est pas envoyé.
peut-être que vous pourriez essayer
$.ajax()au lieu dexhret invoquer soumettre le formulaire à la dernière ligne:$("#upload_form").submit();Pour le téléchargement, j'ai utilisé AJAX uploader fonction de JIC. Maintenant, je suis en mesure de les redimensionner et de les télécharger, mais l'image redimensionnée est pas comme prévu. Veuillez jeter un oeil à mon code mis à jour.
OriginalL'auteur yuhua
Vous pouvez essayer avec PHP plutôt que de HTML et de JavaScript. Ce que nous faisons est que nous sommes stocker le chemin d'accès de l'image dans la base de données.
Maintenant, vous pouvez utiliser cette fonction de la façon de redimensionner les images et le copier dans le répertoire requis.
Par exemple:
mise à jour de ma réponse
OriginalL'auteur Abhishek