使用 jquery 文件上传在上传前压缩图像

Question

我正在使用 jquery file upload plugin 直接上传到 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 在这里是否正确，但我也对任何其他选择持开放态度：

例如：我自己也创建了一个压缩图片的函数，那个函数return图片Blob，我就是不知道怎么说JQuery 文件上传 使用该 blob 而不是输入文件中的图像

Answer 1

我将在找到解决方案后回答我的问题，希望这对以后的人有所帮助：

要使用 jquery 文件上传压缩图像，有 2 种解决方案，您可以使用插件提供的压缩功能，或者创建自己的压缩功能并将其与 jquery 文件上传一起使用，我最终使用了第二种解决方案

第一个解法：

我偶然发现的是这个link：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 文件上传的选项，我找到了选项 imageQuality，阅读它，它说：

imageQuality: Sets the quality parameter given to the canvas.toBlob() call when saving resized images.

因此 imageQuality 选项似乎仅在调整图像大小时有效，但在我的情况下我不需要调整图像大小，但您可以使用其他选项imageForceResize，通过结合这两个选项你可以使压缩工作，但还需要第三个选项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中，所以你要做的就是有一个压缩图像的功能和return 一个 blob 数组，然后覆盖 data.files

$('#file_input').fileupload({

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

})

使用 jquery 文件上传在上传前压缩图像

compress images before uploading using jquery file upload

jquery

jquery-file-upload