сжать изображения перед загрузкой с помощью загрузки файла jquery

Question

Я использую плагин jquery для загрузки файлов для прямой загрузки на s3, я пытаюсь сжать изображение перед загрузкой, я попробовал вариант imageQuality: 0.8

fileInput.fileupload({

            fileInput:       fileInput,
            url:             my_url
            type:            'POST',
            paramName:        'file',
            dataType:         'XML',
            replaceFileInput: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
            maxFileSize: 999000,  
            imageQuality: 0.8,

            // .....

})

Однако размер изображения не сжимается после загрузки

Я не уверен, что imageQuality здесь подходит, но я открыт и для любой другой альтернативы:

Например: Я также создал свою собственную функцию для сжатия изображений, эта функция возвращает блоб изображения, я просто не знаю, как сказать Загрузка файла JQuery , чтобы использовать этот блоб вместо изображения извходной файл

Answer 1

Я собираюсь ответить на мой вопрос после того, как я найду решение, надеюсь, это поможет кому-то в будущем:

Для сжатия изображения с помощью загрузки файла jquery есть 2 решения, либо вы используете сжатие, предоставляемоеПлагин или вы создаете свою собственную функцию сжатия и использовать ее с JQuery файл загрузки, я в конечном итоге использовал второе решение

Первое решение:

Я наткнулся на то, чтоэта ссылка: https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

Итак, что вам в основном нужно сделать, это импортировать следующие файлы в ваш проект: jquery.js, jquery.ui.widget.js, load-image.all.min.js, canvas-to-blob.min.js, jquery.iframe-transport.js, jquery.fileupload.js, jquery.fileupload-process.js, jquery.fileupload-image.js

Затем, глядя на параметры загрузки файла jQuery, я нашелoption imageQuality , читая его, пишет:

imageQuality : задает параметр качества, указанный в вызове canvas.toBlob () при сохранении изображений с измененным размером.

Так что, похоже, опция imageQuality работает только при изменении размера изображения, но в моем случае мне не нужно изменять размер изображения, но вы можете использоватьдругая опция imageForceResize , комбинируя эти 2 опции, вы можете заставить сжатие работать, но необходим третий параметр disableImageResize , по умолчанию этот параметр установлен в значение true, поэтому нам нужноустановите значение false, чтобы разрешить изменение размера изображения.

Окончательный код выглядит следующим образом:

$('#file_input').fileupload({

    # these 3 options are necessary together for compressing
    disableImageResize: false,
    imageForceResize: true,
    imageQuality: 0.7,
    // ......
})

Для второго решения:

Если вы хотите использовать свою собственную функцию сжатия, которая, на мой взгляд, является наилучшим способом, то в этом случае вам просто нужно jquery.js, jquery.ui.widget.js, jquery.fileupload.js

Загрузка файла Jquery хранить файлы для загрузкив data.files перед их отправкой, поэтому вам нужно иметь функцию, которая сжимает изображения и возвращает массив BLOB-объектов, а затем перезаписывает data.files

$('#file_input').fileupload({

   add: function(e, data){
       // .......
       data.files = compress_images_function()
       data.submit()
   }

})