web-dev-qa-db-fra.com

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

Quelqu'un connaît-il un script gratuit qui comprime autant que possible les fichiers JPG, GIF et PNG?

javascriptjqueryjquery-plugins
36
xtremist

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: Redimensionnement d'une image dans un canevas HTML5

17
typeof

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

Vous pouvez essayer la démo ici: http://makeitsolutions.com/labs/jic et obtenir les sources ici: https://github.com/brunobar79/J-I-C

55
brunobar79

J'ai lu une expérience ici: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

La théorie est que vous pouvez utiliser le canevas pour redimensionner les images sur le client avant de les télécharger. L'exemple de prototype ne semble fonctionner que dans les navigateurs récents, idée intéressante cependant ...

Cependant, je ne suis pas sûr d'utiliser le canevas pour compresser les images, mais vous pouvez certainement les redimensionner.

6
David Hellsing

Si vous recherchez une bibliothèque pour effectuer la compression d'image côté client, vous pouvez vérifier 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 et également la qualité d'image préférée.

6
alextanhongpin

Je suis en retard à la fête, mais cette solution a très bien fonctionné pour moi. Basé sur 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;
}
6
user1791914