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在这里是否正确，但也可以接受其他任何选择：

例如：我还创建了自己的函数来压缩图像，该函数返回图像Blob，我只是不知道如何告诉 JQuery File Upload 使用该Blob代替输入文件中的图片

Answer 1

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

要使用jquery文件上传来压缩图像，有2种解决方案，要么使用插件提供的压缩，要么创建自己的compress函数，然后将其与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 File upload的选项，我发现选项imageQuality读了起来，上面写着：

imageQuality ：设置在以下情况下为canvas.toBlob（）调用提供的质量参数：保存调整大小的图像。

因此，看来 imageQuality 选项仅在调整图像大小时才有效，但是在我来说，我不需要调整图像大小，但是可以使用其他选项imageForceResize ，通过结合使用这两个选项，可以使压缩工作，但是还需要第三个选项 disableImageResize ，默认情况下此选项设置为true，因此我们需要将其设置为false以允许调整图像大小

最终代码如下：

$('#file_input').fileupload({

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

第二种解决方案：

如果您想使用自己的compress函数，我认为这是最好的方法，那么在这种情况下，您只需要jquery.js, jquery.ui.widget.js, jquery.fileupload.js

jQuery文件上传在提交之前将要上传的文件存储在data.files中，因此您要做的就是拥有一个压缩图像并返回blob数组，然后覆盖{{ 1}}

data.files

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

1 个答案: