feat: Redimensionnement des images téléversées depuis le navigateur

Utilisation de la librairie JS JavaScript-Load-Image
https://github.com/blueimp/JavaScript-Load-Image

Note: Il y a quelques rares photos qui plantent au niveau de flow dans
l'evenement fileSuccess. l'argument message arrive vide. Alors que
l'image générée par les lib est OK, du moins pour l'afficher dans le
navigateur. Il faudrait pouvoir renvoyer "retry()", avec l'image
originale, mais on ne l'a plus.

Refs: #4538

bigup_pipelines.php

@@ -28,6 +28,7 @@ function bigup_jquery_plugins($scripts) {
 			'lang' => $GLOBALS['spip_lang'],
 		]);
 		$scripts[] = 'lib/flow/flow.js';
+		$scripts[] = 'lib/load_image/load-image.all.min.js';
 		$scripts[] = 'javascript/bigup.js';
 		$scripts[] = 'javascript/bigup.loader.js';
 	}

javascript/bigup.js

@@ -361,8 +361,16 @@ Bigup.prototype = {
 				$.each(files, function (key, file) {
 					me.progress.ajouter(file.emplacement);
 					me.input.trigger('bigup.fileSubmitted', [file]);
+
+					const type = file.file.type;
+					const Timage = ['image/jpeg', 'image/png'];
+					if (Timage.includes(type)) {
+						compress(file, me.flow);
+					} else {
+						me.flow.upload();
+					}
 				});
-				me.flow.upload();
+				// me.flow.upload();
 			}
 		});
 
@@ -378,7 +386,6 @@ Bigup.prototype = {
 		// Adapter le bouton 'Annuler' => 'Enlever'
 		// Retirer la barre de progression
 		this.flow.on('fileSuccess', function (file, message, chunk) {
-			// console.info("success", file, message, chunk);
 			var desc = '';
 			try {
 				desc = JSON.parse(message);
@@ -394,9 +401,11 @@ Bigup.prototype = {
 				me.progress.retirer(file.emplacement.find('progress'));
 				me.input.trigger('bigup.fileSuccess', [file, desc]);
 			} catch (e) {
+				console.warn('message ', message);
 				desc = _T('bigup:erreur_de_transfert') + ' : ' + e;
 				me.progress.retirer(file.emplacement.find('progress'));
 				me.presenter_erreur(file.emplacement, desc);
+				// file.retry();
 			}
 		});
 
@@ -421,7 +430,6 @@ Bigup.prototype = {
 		// Afficher l'erreur
 		// Retirer la barre de progression
 		this.flow.on('fileError', function (file, message, chunk) {
-			console.warn('error', file, message, chunk);
 			var message_erreur = _T('bigup:erreur_de_transfert');
 			if (message) {
 				try {
@@ -1036,3 +1044,19 @@ $.bigup_verifier_depots_etendus = function () {
 		}
 	});
 };
+
+/**
+ * Fonction asynchrone maison en attendant flow v3 qui apporte l'async
+ */
+async function compress(file, that) {
+	const data = await loadImage(file.file, {
+		maxWidth: 600,
+		canvas: true,
+	});
+	data.image.toBlob((blob) => {
+		file.file = blob;
+		file.size = file.file.size;
+		file.bootstrap();
+		that.upload();
+	}, file.file.type);
+}