2011-04-09 27 views
25

¿Alguien sabe de algún script gratuito que comprima archivos JPG, GIF y PNG tanto como sea posible?Comprimir imágenes en el lado del cliente antes de cargar

+4

Los tres de estos son formatos ya comprimidos. La compresión adicional de las imágenes existentes provocaría una pérdida de calidad. – Charles

+0

¿qué dice usted acerca de este "smushit.com" – xtremist

+0

@Charles no necesariamente, la mayoría de la gente es lenta para poder comprimir sus imágenes. Por lo tanto, la compresión sin pérdidas probablemente disminuiría en gran medida el tamaño de la mayoría de las imágenes. –

Respuesta

10

Es posible que pueda cambiar el tamaño de la imagen con canvas y exportarla utilizando dataURI. No estoy seguro acerca de la compresión, sin embargo.

Tome un vistazo a esto: Resizing an image in an HTML5 canvas

4

leí sobre un experimento aquí: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

La teoría es que se puede utilizar tela para cambiar el tamaño de las imágenes en el cliente antes de cargar. El prototipo de ejemplo parece funcionar solo en navegadores recientes, aunque es una idea interesante ...

Sin embargo, no estoy seguro acerca de usar lienzo para comprimir imágenes, pero ciertamente puede cambiar su tamaño.

+0

por el necesito algo así como smushit.com – xtremist

+0

No creo que puedas replicar Smushit en el lado del cliente. – David

+0

$ mush-it => $ mu- $ golpe. Jaja, me entristecí usando jQuery ..... –

51

acabo desarrollaron una librería javascript llamada JIC para resolver ese problema. ¡Te permite comprimir jpg y png en el lado del cliente al 100% con javascript y no se requieren bibliotecas externas!

Puede probar la demo aquí: http://makeitsolutions.com/labs/jic y obtener las fuentes aquí: https://github.com/brunobar79/J-I-C

espero que les guste.

+1

¿No hay forma de descomprimirlo? – RWendi

+17

Debería poder descomprimirlo simplemente cambiando el tamaño de la imagen para que sea más grande. Puede que necesite descargar más memoria RAM para hacer esto. – Dan

+0

@ brunobar79 ¿Puede esto exportar la imagen a una Blob de JavaScript, para que podamos subirla sin el uso de PHP? –

4

Llego tarde a la fiesta, pero esta solución funcionó bastante bien para mí. Sobre la base de this library, puede utilizar una función lik este - ajuste de la imagen, calidad, ancho máximo, y el formato de salida (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; 
} 
3

Si está buscando una biblioteca para llevar a cabo cliente- compresión de imagen lateral, puede verificar esto: compress.js. Esto básicamente lo ayudará a comprimir múltiples imágenes puramente con JavaScript y convertirlas a la cadena base64. Opcionalmente, puede establecer el tamaño máximo en MB y también la calidad de imagen preferida.

Cuestiones relacionadas