Comprimi le immagini sul lato client prima di caricare

Qualcuno sa di uno script gratuito che comprime il più ansible i file JPG, GIF e PNG?

Potresti essere in grado di ridimensionare l’immagine con canvas ed esportarla utilizzando dataURI. Non sono sicuro della compressione, comunque.

Dai un’occhiata a questo: Ridimensionamento di un’immagine in un canvas HTML5

Ho appena sviluppato una libreria javascript chiamata JIC per risolvere questo problema. Ti permette di comprimere jpg e png sul lato client al 100% con javascript e nessuna libreria esterna richiesta!

Puoi provare la demo qui: http://makeitsolutions.com/labs/jic e ottenere le fonti qui: https://github.com/brunobar79/JIC

Spero ti piaccia.

Sono in ritardo per la festa, ma questa soluzione ha funzionato abbastanza bene per me. In base a questa libreria , è ansible utilizzare una funzione simile a questa: impostare l’immagine, la qualità, la larghezza massima e il formato di output (jepg, png):

 function compress(source_img_obj, quality, maxWidth, output_format){ var mime_type = "image/jpeg"; if(typeof output_format !== "undefined" && output_format=="png"){ mime_type = "image/png"; } maxWidth = maxWidth || 1000; var natW = source_img_obj.naturalWidth; var natH = source_img_obj.naturalHeight; var ratio = natH / natW; if (natW > maxWidth) { natW = maxWidth; natH = ratio * maxWidth; } var cvs = document.createElement('canvas'); cvs.width = natW; cvs.height = natH; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; } 

Ho letto di un esperimento qui: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

La teoria è che puoi usare la canvas per ridimensionare le immagini sul client prima di caricarle. L’esempio del prototipo sembra funzionare solo nei browser recenti, un’idea interessante però …

Tuttavia, non sono sicuro di usare canvas per comprimere le immagini, ma puoi certamente ridimensionarle.

Se stai cercando una libreria per eseguire la compressione dell’immagine lato client, puoi verificarlo: compress.js . Questo fondamentalmente ti aiuterà a comprimere più immagini puramente con JavaScript e convertirle in una stringa base64. È ansible impostare opzionalmente la dimensione massima in MB e anche la qualità dell’immagine preferita.