Ridimensionamento delle immagini lato client con JavaScript prima del caricamento sul server

Sto cercando un modo per ridimensionare un'immagine lato client con JavaScript (ridimensionare davvero, non solo cambiare larghezza e altezza).
So che è possibile farlo in Flash, ma vorrei evitarlo, se possibile.

Esiste un algoritmo open source da qualche parte sul web?

Ecco un riassunto che lo fa: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(una versione es6 e una versione .js che può essere inclusa in un tag script)

Puoi usarlo come segue:

<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>

Include un sacco di rilevamento del supporto e polyfill per assicurarsi che funzioni su tutti i browser che sono riuscito a gestire.

(ignora anche le immagini gif - nel caso siano animate)

La risposta è sì: in HTML 5 puoi ridimensionare le immagini sul lato client usando l'elemento canvas. Puoi anche prendere i nuovi dati e inviarli a un server. Vedi questo tutorial:

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

Se stavi ridimensionando prima di caricare ho appena scoperto questo http://www.plupload.com/

Fa tutta la magia per te in qualsiasi metodo immaginabile.

Purtroppo il ridimensionamento HTML5 è supportato solo con il browser Mozilla, ma è possibile reindirizzare altri browser su Flash e Silverlight.

L'ho appena provato e ha funzionato con il mio Android!

Stavo usando http://swfupload.org/ in flash, fa molto bene il lavoro, ma la dimensione del ridimensionamento è molto piccola. (non ricordo il limite) e non torna a html4 quando il flash non è disponibile.

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

Nel browser moderno puoi usare la tela per caricare / salvare i dati delle immagini. Ma dovresti tenere a mente diverse cose se ridimensioni l'immagine sul client:

1. Avrai solo 8 bit per canale (jpeg può avere una gamma dinamica migliore, circa 12 bit). Se non carichi foto professionali, questo non dovrebbe essere un problema.
2. Fai attenzione all'algoritmo di ridimensionamento. La maggior parte dei resizer lato client usano una banale matematica e il risultato è peggiore di quanto potrebbe essere.
3. Potrebbe essere necessario rendere più nitida l'immagine ridotta.
4. Se desideri riutilizzare i metadati (exif e altri) dall'originale, non dimenticare di eliminare le informazioni del profilo colore. Perché viene applicato quando carichi l'immagine su tela.

Forse con il tag canvas (anche se non è portatile). C'è un blog su come ruotare un'immagine con la tela qui , suppongo che se puoi ruotarla, puoi ridimensionarla. Forse può essere un punto di partenza.

Vedi anche questa libreria .

È possibile utilizzare un framework di elaborazione delle immagini javascript per l'elaborazione delle immagini sul lato client prima di caricare l'immagine sul server.

Di seguito ho usato MarvinJ per creare un codice eseguibile basato sull'esempio nella pagina seguente: "Elaborazione di immagini sul lato client prima di caricarlo su un server"

Fondamentalmente uso il metodo Marvin.scale (...) per ridimensionare l'immagine. Quindi, carico l'immagine come BLOB ( usando il metodo image.toBlob () ). Il server risponde fornendo un URL dell'immagine ricevuta.

/***********************************************
 * 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>

Sì, con i browser moderni questo è totalmente fattibile. Perfino fattibile fino al punto di caricare il file specificatamente come file binario dopo aver apportato un numero qualsiasi di modifiche alla tela.

http://jsfiddle.net/bo40drmv/

(questa risposta è un miglioramento della risposta accettata qui )

Tenendo presente che è possibile elaborare la presentazione dei risultati nel PHP con qualcosa di simile a:

//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);

Se uno si preoccupa del punto di Vitaly, puoi provare alcuni ritagli e ridimensionamenti sul jfiddle funzionante.

Nella mia esperienza, questo esempio è stata la migliore soluzione per caricare un'immagine ridimensionata: https://zocada.com/compress-resize-images-javascript-browser/

Utilizza la funzione HTML5 Canvas.

Il codice è "semplice" come questo:

compress(e) {
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const width = Math.min(800, img.width);
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;

                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}

C'è solo un aspetto negativo con questa opzione, ed è correlato alla rotazione dell'immagine, a causa dell'ignoranza dei dati EXIF. Su cui sto lavorando al momento. Si aggiornerà dopo che avrò finito.

Un altro aspetto negativo è la mancanza di supporto per IE / Edge, su cui sto lavorando. Sebbene ci siano informazioni nel link sopra. Per entrambi i problemi.