Produits Entr'ouvert » w.c.s.

Malheureusement c'est surtout du js où on n'a pas d'infra pour tester.

Dans le patch j'active par défaut le redimensionnement (avec une option pour le désactiver), si on considère risqué de balancer ça partout, je peux l'inverser.

Pas de risque, off par défaut.

Par contre c'est avec les PNG que ça plante, quelque soit la taille.

Ok et en fait cette partie "exif" est pas trop nécessaire sur les PNG, je vais la faire sauter.

Ce qui n'était pas nécessaire non plus c'était redimensionner les petits fichiers; ce patch corrige ça, interdiff :

@@ -232,25 +232,38 @@ $.WcsFileUpload = {
                             var width = img.width;
                             var height = img.height;

-                            if (width > height) {
-                                if (width > MAX_WIDTH) {
-                                    height *= MAX_WIDTH / width;
-                                    width = MAX_WIDTH;
-                                }
-                            } else {
-                                if (height > MAX_HEIGHT) {
-                                    width *= MAX_HEIGHT / height;
-                                    height = MAX_HEIGHT;
+                            if (width > height && width > MAX_WIDTH) {
+                                height *= MAX_WIDTH / width;
+                                width = MAX_WIDTH;
+                            } else if (height > MAX_HEIGHT) {
+                                width *= MAX_HEIGHT / height;
+                                height = MAX_HEIGHT;
+                            }
+                            if (img.width != width || img.height != height) {
+                                canvas.width = width;
+                                canvas.height = height;
+                                var ctx = canvas.getContext('2d');
+                                ctx.drawImage(img, 0, 0, width, height);
+                                var new_image_64 = canvas.toDataURL('image/jpeg', 0.95);
+                                var blob = null;
+                                if (data.files[0].type == 'image/jpeg') {
+                                    blob = ExifRestorer.restore_as_blob(original_image_64, new_image_64);
+                                    blob.name = data.files[0].name;
+                                } else {
+                                    // adapted from dataURItoBlob, from
+                                    // https://stackoverflow.com/questions/12168909/blob-from-dataurl#12300351
+                                    var byteString = atob(new_image_64.split(',')[1]);
+                                    var mimeString = new_image_64.split(',')[0].split(':')[1].split(';')[0]
+                                    var ab = new ArrayBuffer(byteString.length);
+                                    var ia = new Uint8Array(ab);
+                                    for (var i = 0; i < byteString.length; i++) {
+                                        ia[i] = byteString.charCodeAt(i);
+                                    }
+                                    blob = new Blob([ab], {type: mimeString});
+                                    blob.name = data.files[0].name + '.jpg';
                                 }
+                                data.files[0] = blob;
                             }
-                            canvas.width = width;
-                            canvas.height = height;
-                            var ctx = canvas.getContext('2d');
-                            ctx.drawImage(img, 0, 0, width, height);
-                            var new_image_64 = canvas.toDataURL('image/jpeg', 0.95);
-                            var blob = ExifRestorer.restore_as_blob(original_image_64, new_image_64);
-                            blob.name = data.files[0].name;
-                            data.files[0] = blob;
                             return $.WcsFileUpload.upload(base_widget, data);
                         }
                         img.src = e.target.result;

Je valide :

• JPEG:
  • 26Mo : 4 secondes
• PNG:
  • 192 Mo : 2 secondes

Dans les 2 cas, les images sont réduites à 2.4 Mo

• TIFF:
  • 24 Mo ok
  • 75 Mo (Erreur lors du transfert en rouge dans la barre de progression)

Pour information seulement, c'est assez aléatoire mais je remarque :
- rien d'affiché pour JPEG
- parfois 'rezising image' affiché dans la barre pour PNG
Vu le code,
$(base_widget).find('.fileprogress .bar').css('width', '100%');
je m'attendais à voir une barre de progression.

ça pourrait peut-être être amélioré par la suite car le fait de cliquer sur suivant, avant que l'affichage n'indique que l'image soit téléchargée, fait échouer l'upload (aussi bien pour PNG que JPEG). cependant avec des JPEG de 8 Mo, on a à peine le temps de cliquer (c'est immédiat pour les PNG de 8 Mo).

75 Mo (Erreur lors du transfert en rouge dans la barre de progression)

Je miserais sur une erreur au niveau de nginx (client_max_body_size).

Vu le code,
$(base_widget).find('.fileprogress .bar').css('width', '100%');
je m'attendais à voir une barre de progression.

Il y a une barre de progression le temps de l'upload et elle est réutilisée mise à 100% ici parce qu'usuellement le texte qui y apparait est plus lisible sur le fond de couleur de la barre que sur le fond blanc. (c'est pour le texte "resizing").

le fait de cliquer sur suivant, avant que l'affichage n'indique que l'image soit téléchargée, fait échouer l'upload

Curieux normalement ça devrait être désactivé pendant l'upload (#9882). (bug trouvé, #33053)

on a à peine le temps de cliquer

Côté mesures, faut aussi imaginer que ça va être utilisé par des téléphones, moins puissants et sur des réseaux moins rapides. (il y a dans chromium de quoi simuler la partie réseau).

commit 551bb349e05c7e7bb2c8265437fc10a1d9773270
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Sun Mar 3 18:00:30 2019 +0100

    misc: add option to resize images before upload (#23152)