Redimensionnement de l'Image côté client avec JavaScript avant le téléchargement sur le serveur

voici un gist qui fait ceci: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(es6 version, et un .version js qui peut être inclus dans une étiquette de script)

Vous pouvez l'utiliser comme suit:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

il comprend un tas de détection de soutien et polyfills pour s'assurer qu'il fonctionne sur autant de navigateurs que je pourrais gérer.

(il ignore également gif images-in cas ils sont animés)

la réponse à cette question est oui - en HTML 5 vous pouvez redimensionner les images côté client en utilisant l'élément canvas. Vous pouvez également prendre les nouvelles données et les envoyer à un serveur. Voir ce tutoriel:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader /

si vous redimensionniez avant de télécharger je viens de découvrir ce http://www.plupload.com/

il fait toute la magie pour vous dans n'importe quelle méthode imaginable.

malheureusement HTML5 reize only est pris en charge par le navigateur Mozilla, mais vous pouvez rediriger D'autres navigateurs vers Flash et Silverlight.

j'ai juste essayé et ça a marché avec mon androïde!

j'utilisais http://swfupload.org/ en flash, il fait le travail très bien, mais le redimensionner la taille est très petite. (ne se souvient pas de la limite) et ne retourne pas à HTML4 lorsque flash n'est pas disponible.

http://nodeca.github.io/pica/demo/

dans le navigateur moderne, vous pouvez utiliser canvas pour charger/enregistrer des données d'image. Mais vous devez garder à l'esprit plusieurs choses si vous redimensionnez l'image sur le client:

1. vous aurez seulement 8bits par canal (jpeg peut avoir une meilleure portée dynamique, environ 12 bits). Si vous ne téléchargez pas de photos professionnelles, qui ne devrait pas être un problème.
2. faites attention à redimensionner algorithme. La plupart des Redimensionneurs côté client utilisent des mathématiques triviales, et le résultat est pire qu'il pourrait être.
3. il est possible que vous ayez besoin d'affiner l'image.
4. si vous souhaitez réutiliser les métadonnées (exif et autres) de l'original - n'oubliez pas de supprimer les informations sur les profils de couleur. Parce qu'il est appliqué quand vous chargez l'image sur la toile.

peut-être avec l'étiquette en toile (bien qu'elle ne soit pas portable). Il ya un blog sur la façon de tourner une image avec toile ici , je suppose que si vous pouvez tourner, vous pouvez redimensionner. Peut-être il peut être un point de départ.

Voir il y aussi.

Oui, avec les navigateurs modernes, c'est totalement faisable. Même faisable au point de télécharger le fichier spécifiquement comme un fichier binaire ayant fait un certain nombre de modifications canvas.

http://jsfiddle.net/bo40drmv /

(cette réponse est une amélioration de la réponse acceptée ici )

garder à l'esprit pour attraper le processus de soumission de résultat dans le PHP avec quelque chose d'apparenté à:

//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);

si L'on s'inquiète du point de Vitaly, vous pouvez essayer la coupe et le redimensionnement sur le jfiddle de travail.

vous pouvez utiliser un cadre de traitement d'image javascript pour le traitement d'image côté client avant de télécharger l'image sur le serveur.

ci-dessous j'ai utilisé MarvinJ pour créer un code exécutable basé sur l'exemple de la page suivante: "traiter des images côté client avant de les transférer sur un serveur"

en gros, J'utilise la méthode Marvin.échelle.(..) pour redimensionner l'image. Ensuite, je télécharge l'image comme un blob (en utilisant la méthode image.toBlob () ). Le serveur répond en fournissant une URL de l'image reçue.

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
	
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,
		
	   
		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>