gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 07:39:08 26 4
gpt4 key购买 nike

我正在使用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 而不是输入文件中的图像

最佳答案

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

要使用jquery文件上传来压缩图像,有两种解决方案,要么使用插件提供的压缩,要么创建自己的压缩函数并将其与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文件上传的选项,发现选项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 中,因此您要做的就是拥有一个压缩图像并返回 blob 数组的函数,然后覆盖data.files

$('#file_input').fileupload({

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

})

关于jquery - 使用 jquery 文件上传在上传之前压缩图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54657120/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com