spip
/
bigup
15
0
Fork 3
Code Issues 9 Pull Requests Releases Wiki Activity

feat: Configuration du redimensionnement des images côté navigateur

Browse Source 
* largeur maximale
* hauteur maximale
* qualité de compression post retaillage

Si on n'a pas de valeur de largeur et de hauteur, on ne fait rien, bigup
fonctionne comme avant

Refs: #4538
remotes/checkIfPRContentChanged-1673017409919674129/issue_4538
tofulm 7 months ago committed by Matthieu Marcillaud
parent 34fe2395b9
commit ac95b72155
6 changed files with 90 additions and 21 deletions
Show Stats Download Patch File Download Diff File

5
bigup_pipelines.php
Unescape Escape View File

@ -60,9 +60,12 @@ function bigup_insert_head($flux) {
function bigup_header_prive($flux) {
include_spip('inc/config');
$maxFileSize = intval(lire_config('bigup/max_file_size', 0));
$clientWidth = floatval(lire_config('bigup/client_width', 0));
$clientHeight = floatval(lire_config('bigup/client_height', 0));
$clientQuality = floatval(lire_config('bigup/client_quality', 0));
$formatLogos = json_encode($GLOBALS['formats_logos'], JSON_THROW_ON_ERROR);
$flux .= <<<EOS
<script type='text/javascript'>jQuery.bigup_config = {maxFileSize: $maxFileSize, formatsLogos: $formatLogos}</script>
<script type='text/javascript'>jQuery.bigup_config = {maxFileSize: $maxFileSize, formatsLogos: $formatLogos, clientWidth: $clientWidth, clientHeight: $clientHeight, clientQuality: $clientQuality}</script>
EOS;
return $flux;
}

28
formulaires/configurer_bigup.html
Unescape Escape View File

@ -35,6 +35,34 @@
</div>
<h3 class="titrem"><:bigup:cfg_titre_retailler_image:></h3>
<p class="explication"><:bigup:cfg_explication_retailler_image:></p>
<div class="editer-groupe">
#SET{name,client_width}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}"><:bigup:cfg_client_width:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
<p class="explication"><:bigup:cfg_client_width_explication:></p>
</div>
#SET{name,client_height}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}"><:bigup:cfg_client_height:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
<p class="explication"><:bigup:cfg_client_height_explication:></p>
</div>
#SET{name,client_quality}#SET{obli,''}#SET{defaut,0.8}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}"><:bigup:cfg_client_quality:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
<p class="explication"><:bigup:cfg_client_quality_explication:></p>
</div>
</div>
<input type="hidden" name="_meta_casier" value="bigup" />
<p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer|attribut_html:>" /></p>
</div>

60
javascript/bigup.js
Unescape Escape View File

@ -82,6 +82,9 @@ $.fn.bigup = function (options, callbacks) {
accept: $input.prop('accept'),
maxFiles: $input.prop('multiple') ? sinon($input.data('maxfiles'), 0) : 1,
maxFileSize: sinon($input.data('maxfilesize'), conf.maxFileSize),
clientWidth: sinon($input.data('clientwidth'), conf.clientWidth),
clientHeight: sinon($input.data('clientheight'), conf.clientHeight),
clientQuality: sinon($input.data('clientquality'), conf.clientQuality),
},
},
callbacks
@ -121,6 +124,9 @@ $.fn.bigup = function (options, callbacks) {
* @param {string} [opts.contraintes.accept]
* @param {int} [opts.contraintes.maxFiles]
* @param {int} [opts.contraintes.maxFileSize]
* @param {int} [opts.contraintes.clientWidth]
* @param {int} [opts.contraintes.clientHeight]
* @param {float} [opts.contraintes.clientQuality]
* @param {int} [opts.flow.simultaneousUploads]
* @param {int[]} [opts.flow.permanentErrors]
* @param {int} [opts.flow.chunkRetryInterval]
@ -152,6 +158,9 @@ function Bigup(params, opts, callbacks) {
accept: '',
maxFiles: 1,
maxFileSize: 0,
clientQuality: 0.8,
clientWidth: 0,
clientHeight: 0,
},
options: {
// previsualisation des images
@ -357,20 +366,27 @@ Bigup.prototype = {
// Téléverser aussitôt les fichiers valides déposés
this.flow.on('filesSubmitted', function (files) {
const isFileCompress =
me.defaults.contraintes.clientWidth > 0 || me.defaults.contraintes.clientHeight > 0 ? true : false;
if (files.length) {
$.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);
if (isFileCompress) {
const type = file.file.type;
const Timage = ['image/jpeg', 'image/png', 'image/webp'];
if (Timage.includes(type)) {
compress(file, me);
} else {
me.flow.upload();
}
} else {
me.flow.upload();
}
});
// me.flow.upload();
if (!isFileCompress) {
me.flow.upload();
}
}
});
@ -401,7 +417,6 @@ 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);
@ -1048,15 +1063,24 @@ $.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);
async function compress(file, me) {
const opts = {};
opts.canvas = true;
if (me.defaults.contraintes.clientWidth > 0) {
opts.maxWidth = me.defaults.contraintes.clientWidth;
}
if (me.defaults.contraintes.clientHeight > 0) {
opts.maxHeight = me.defaults.contraintes.clientHeight;
}
const data = await loadImage(file.file, opts);
data.image.toBlob(
(blob) => {
file.file = blob;
file.size = file.file.size;
file.bootstrap();
me.flow.upload();
},
file.file.type,
me.defaults.contraintes.clientQuality
);
}

8
lang/bigup_fr.php
Unescape Escape View File

@ -19,6 +19,14 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'cfg_max_file_size' => 'Taille maximum des fichiers',
'cfg_max_file_size_explication' => 'Taille maximum des fichiers (en Mb).',
'cfg_titre_parametrages' => 'Téléversement des fichiers',
'cfg_titre_retailler_image' => 'Options pour activer le retaillage des images sur le client',
'cfg_client_width' => 'Largeur',
'cfg_client_width_explication' => 'Largeur maximale de l’image (px)',
'cfg_client_height' => 'Hauteur',
'cfg_client_height_explication' => 'Hauteur maximale de l’image (px)',
'cfg_client_quality' => 'Qualité',
'cfg_client_quality_explication' => 'Compression de l’image après retaillage, valeur entre 0 et 1, défaut : 0.8',
'cfg_explication_retailler_image' => 'Méthode de réduction des images dans le cas ou la hauteur <strong>et / ou </strong> la largeur sont renseignées.',
'choisir' => 'Choisir',
// D

5
saisies/bigup.html
Unescape Escape View File

@ -10,6 +10,9 @@
data-token="[(#ENV{token,#BIGUP_TOKEN}|attribut_html)]"[
data-maxFiles="(#ENV{maxFiles}|attribut_html)"][
data-maxFileSize="(#ENV{maxFileSize}|attribut_html)"][
data-clientWidth="(#ENV{clientWidth}|attribut_html)"][
data-clientHeight="(#ENV{clientHeight}|attribut_html)"][
data-clientQuality="(#ENV{clientQuality}|attribut_html)"][
data-previsualiser="(#ENV{previsualiser}|?{oui})"][
data-drop-zone-extended="(#ENV{drop_zone_extended}|attribut_html)"]
/>
/>

5
saisies/bigup_exemple_avec_zone.html
Unescape Escape View File

@ -8,7 +8,10 @@
data-class="[(#ENV{nom}|bigup_nom2classe)]"
data-token="#ENV{token,#BIGUP_TOKEN}"[
data-maxFiles="(#ENV{maxFiles})"][
data-maxFileSize="(#ENV{maxFileSize})"]
data-maxFileSize="(#ENV{maxFileSize})"][
data-clientWidth="(#ENV{clientWidth}|attribut_html)"][
data-clientHeight="(#ENV{clientHeight}|attribut_html)"][
data-clientQuality="(#ENV{clientQuality}|attribut_html)"]
/>
[(#REM)

Write Preview
Loading…
Cancel
Save