如何在微信小程序中处理用户上传的图片并进行压缩?

我想做一个微信小程序,用户可以在小程序中上传图片。我想知道:

用户上传的图片应该如何处理?是直接存储还是先进行压缩?
有哪些有效的图片压缩方法和工具推荐?
有没有经验丰富的大佬能分享一下在微信小程序中处理和压缩图片的最佳实践?
非常感谢!

先本地压缩再上传,这样省流量

是用前端压缩吗?压缩成什么格式比较好?

是的,直接有损压缩图片吧;压缩成压缩包看你的需要

1 个赞

我听说 WebP格式压缩率比较高,请问那些平台上一般都压缩成多大?

这个不清楚了,看你的测试吧,具体的不太清楚

建议看需求和服务器配置,如果小程序中有发大看原图的功能,还是上传原图,使用多个压缩库试试效果和压缩大小,找到适合项目的,普通显示就显示压缩后的,这样加载的快些。(新手建议 :grinning:

感谢建议,那这个方案是用前端处理比较好吗

根据实际情况考虑,前端和服务器端都可以处理

前端后端都可以处理,常见的处理方式:

前端限制指定文件扩展名以及大小
后端传 OSS 存储桶,然后大小浏览由存储桶指定
前端压缩再传,
前端直接传 OSS 存储桶,返回后端为 url 保存(不建议,因为这会暴露相关 KEY)

也可以综合起来使用,方便后端鉴权

前端压缩的话微信小程序自带一个api的

            wx.compressImage({
                src: res.tempFilePath,
                compressedHeight: compressTargetHeight, // 压缩后高度
                success: (cpsRes) => {
                    //  console.log('cpsRes', cpsRes.tempFilePath)
                    resolve(cpsRes.tempFilePath)
                },
                fail: () => {
                    console.log('ori', res.tempFilePath)
                    resolve(res.tempFilePath)
                }
               })

wx.compressImage

参数

Object object

属性 类型 默认值 必填 说明 最低版本
src string 图片路径,图片的路径,支持本地路径、代码包路径
quality number 80 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)。
compressedWidth number 压缩后图片的宽度,单位为px,若不填写则默认以compressedHeight为准等比缩放。 2.26.0
compressedHeight number 压缩后图片的高度,单位为px,若不填写则默认以compressedWidth为准等比缩放 2.26.0
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
1 个赞

From 快问快答 to 开发调优