Flutter Web使用image_picker设置图片质量无效 上传后文件大小无变化

问题根本原因 #

• 你使用的image_picker_for_web: ^0.1.0版本过于陈旧，该版本尚未实现imageQuality、maxHeight、maxWidth这几个压缩相关的参数，你在调用getImage时传入的这些参数在Web端完全不会生效，选取到的始终是原图的原始字节，因此无论怎么调整参数，上传的文件大小都不会变化。
• 你的代码中存在一个小的格式问题：上传时文件后缀命名为.jpg，但UploadMetadata中指定的contentType是image/png，不过该问题不会影响图片压缩效果，只会影响部分客户端解析图片的默认行为。
• 该问题和Firebase Storage完全无关，Firebase Storage不会对用户上传的原始字节做任何修改，你上传的文件就是选取图片后拿到的原始文件，因此压缩失效和上传环节没有关系。

解决方案 #

方案1：升级相关依赖 #

将image_picker和image_picker_for_web升级到支持Web端压缩的版本，最低要求为：

image_picker: ^0.8.0
image_picker_for_web: ^2.0.0

升级后原有传入的imageQuality、maxHeight、maxWidth参数即可在Web端正常生效，选取图片时会自动按参数压缩。

方案2：手动实现图片压缩（适配旧版本依赖） #

如果因为项目兼容性问题无法升级依赖，可以自己通过Canvas实现Web端图片压缩，核心逻辑如下：

1. 拿到选取的图片文件后，将其加载到ImageElement中
2. 将图片绘制到指定尺寸的Canvas上
3. 调用Canvas的toBlob方法，传入指定的质量参数导出压缩后的图片字节
4. 用压缩后的字节进行上传即可

内容的提问来源于stack exchange，提问作者Kevin Yang