Ridimensionamento dell’immagine lato client con JavaScript prima del caricamento sul server

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

C’è qualche algoritmo open source da qualche parte sul web?

Ecco un esempio che fa questo: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(una versione es6 e una versione .js che possono essere incluse in un tag script)

Puoi usarlo come segue:

   

Comprende una serie di strumenti di rilevamento del supporto e polyfill per assicurarsi che funzioni su tutti i browser che potrei gestire.

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

La risposta è sì – in HTML 5 puoi ridimensionare le immagini 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 puoi redirect altri browser a Flash e Silverlight.

L’ho appena provato e ha funzionato con il mio android!

Stavo usando http://swfupload.org/ in flash, fa il lavoro molto bene, 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 è ansible utilizzare la canvas per caricare / salvare i dati dell’immagine. Ma dovresti tenere a mente diverse cose se ridimensioni l’immagine sul client:

  1. Avrai solo 8 bit per canale (jpeg può avere un intervallo dinamico migliore, circa 12 bit). Se non carichi foto professionali, non dovrebbe essere un problema.
  2. Fai attenzione all’algoritmo di ridimensionamento. La maggior parte dei resizer lato client usa una matematica banale e il risultato è peggiore di quanto potrebbe essere.
  3. Potrebbe essere necessario affinare l’immagine ridotta in scala.
  4. Se si desidera riutilizzare i metadati (exif e altro) dall’originale, non dimenticare di eliminare le informazioni sul profilo dei colors. Perché è applicato quando si carica l’immagine su canvas.

Forse con il tag canvas (anche se non è portatile). C’è un blog su come ruotare un’immagine con canvas qui , suppongo che se puoi ruotarlo, puoi ridimensionarlo. Forse può essere un punto di partenza.

Vedi anche lì .

Sì, con i browser moderni questo è totalmente fattibile. Anche fattibile fino al punto di caricare il file in modo specifico come un file binario dopo aver fatto un numero qualsiasi di modifiche alla canvas.

http://jsfiddle.net/bo40drmv/

(questa risposta è un miglioramento della risposta accettata qui )

Tenendo presente di prendere in considerazione l’invio 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 un po ‘del ritaglio e del ridimensionamento sul jfiddle funzionante.

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

Di seguito ho utilizzato 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 un 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):
"); }, 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()); }