javascript - pantalla - precargar imagenes jquery

Comprima las imágenes del lado del cliente antes de cargarlas

Question

¿Alguien sabe de algún script gratuito que comprima archivos JPG, GIF y PNG tanto como sea posible?

Answer 1

Acabo de desarrollar una biblioteca de 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 demostración aquí: http://makeitsolutions.com/labs/jic y obtener las fuentes aquí: https://github.com/brunobar79/J-I-C

Espero que te guste.

Answer 2

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

La teoría es que puedes usar lienzo para cambiar el tamaño de las imágenes en el cliente antes de subirlas. El prototipo de ejemplo parece funcionar solo en navegadores recientes, idea interesante ...

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

Answer 3

Llego tarde a la fiesta, pero esta solución funcionó bastante bien para mí. En función de https://github.com/brunobar79/J-I-C , puede utilizar una función como esta: configurar la imagen, la calidad, el 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;
}

Answer 4

Si está buscando una biblioteca para realizar la compresión de imagen del lado del cliente, 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.

Answer 5

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.

Eche un vistazo a esto: Cambiar el tamaño de una imagen en un lienzo de HTML5