Compresser les images côté client avant de les télécharger

Question

Est-ce que quelqu'un connaît un script gratuit qui compresse autant que possible les fichiers JPG, GIF et PNG ?

Answer 1

Je viens de développer une bibliothèque javascript appelée JIC pour résoudre ce problème. Il vous permet de compresser jpg et png côté client à 100% avec javascript et aucune bibliothèque externe n'est requise !

Vous pouvez essayer la démo ici : http://makeitsolutions.com/labs/jic et obtenez les sources ici : https://github.com/brunobar79/JIC

Answer 2

Vous pourrez peut-être redimensionner l'image avec canvas et l'exporter à l'aide de dataURI. Pas sûr de la compression, cependant.

Jetez un œil à ceci : Redimensionner une image dans un canevas HTML5

Answer 3

Si vous recherchez une bibliothèque pour effectuer la compression d'images côté client, vous pouvez consulter ceci : compress.js . Cela vous aidera essentiellement à compresser plusieurs images uniquement avec JavaScript et à les convertir en chaîne base64. Vous pouvez éventuellement définir la taille maximale en Mo ainsi que la qualité d'image préférée.

Answer 4

Je suis en retard à la fête, mais cette solution a plutôt bien fonctionné pour moi. Sur la base de cette bibliothèque , vous pouvez utiliser une fonction comme celle-ci - définir l'image, la qualité, la largeur maximale et le format de sortie (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;
}