He estado trabajando en un proyecto de trabajo recientemente y me han pedido que agregue algo de compresión a las imágenes que llegan a través de un formulario. Actualmente estamos usando filepond y se supone que no debo cambiarlo, solo agregue compresión.

He visto la propiedad imageTransformOutputQuality pero no puedo hacer que funcione...

Aquí está el código https://pastebin.com/QEU0Jimm He intentado poner la propiedad en setOptions como esta

 const filepond = $.fn.filepond.setOptions({ maxFileSize: '50MB', labelMaxFileSizeExceeded: translations.fileTooBig, labelMaxFileSize: translations.maximumSizeIs + ' {filesize}', acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'], labelFileTypeNotAllowed: translations.wrongFileType, fileValidateTypeLabelExpectedTypes: translations.acceptedFileTypeAre + ' {allButLastType} ' + translations._or + ' {lastType}', fileValidateTypeLabelExpectedTypesMap: { 'image/jpeg': '.jpeg', 'image/png': '.png', 'image/jpg': '.jpg', 'image/gif': '.gif' }, imageTransformOutputQuality: 20, });

pero no funcionó, así que intenté ponerlo donde creamos el estanque de esta manera

 $(elements.commentFile).filepond({ name: 'file', labelIdle: translations.slideYourFile + ' <span class="filepond--label-action smp-text_main-color">' + translations.addOnClickHere + '</span>', credits: false, beforeRemoveFile: function () { return confirm(translations.confirmDeleteEdits) }, imageTransformOutputQuality: 20 });

pero aún falló.

Con imageTransformOutputQuality en 20, cuando trato de enviar una imagen de 13 MB, en la parte posterior obtengo 6,5 MB, por lo que no es un 20%... Pero peor, cuando intento con una imagen de 4 MB, no cambia nada... Y peor aún, cuando envío una imagen de 44 MB, en la parte posterior obtengo un archivo de 66 MB...

Ni siquiera puedo entender lo que está pasando.

Si alguno de ustedes tiene alguna idea o explicación, sería genial.

Gracias de antemano y que tengas un buen día.