Flutter加载大图内存问题处理

结论先行：

photo_manager库靠谱，满足相册、图片列表内存的使用
cacheWidth、cacheHeight 在Image层次上的满足，如果一个页面内固定几张图，推荐这种
width、height，对内存优化无效
- 会先解析原图，4.2M的图，会暴增到121.9 M，然后再resize降低内存

字多的结论

使用photo_manager库靠谱，好用，内存测过没问题（成熟，靠谱，推荐使用）
- 关键就是自定义 ImageProvider，将图片加载导向native
- Android端用的Glide库管理，IOS用的原生API
- 源代码对应下文的成熟的第三方库处理
cacheWidth，cacheHeight 影响图像载入内存大小，可进行resize
- 内存会显著降低（可用，底层代码后续写，测试具体数据看这个）
- Anyway,重点不是cacheWidth、cacheHeight，它没有内存管理，也没三级缓存。适用于一个页面周期内单个图片。相册、图片列表、图片瀑布流是不适合的。
width、height 对内存的占用不产生影响
- 会产生峰值，之后resize掉（resize是哪里操作，后续补充）（当然，这也可以说产生影响。）
- 不过这个峰值就够OOM了

版本变更

Flutter做了升级,对cacheWidth、cacheHeight。具体见提交

When down-scaling images, decode encoded images into smaller images
closer to the target size before finally down-scaling them to their
target size. For very large images this can avoid inflating the image
into its full size first before throwing it away. This can help to
significantly reduce peak memory utilization.

内存抓取

测试具体数据看这个

波峰的为使用width、height，较为平稳的是使用cacheWidth、cacheHeight。

图片大小计算

1080P图片大小，RGBA 8888格式每个通道占8bite = 1byte, 4通道图像的1个像素=4byte192010804= 8294400B 8294400/1024/1024 = 7.9101MB所以，1080P的图片在内存中占用不到8M.

Android Bitmap OOM native解决方式

报错

E/flutter: [ERROR:flutter/lib/ui/painting/image_descriptor.cc(174)] Failed to allocate memory for bitmap of size 127844352B
E/flutter: [ERROR:flutter/lib/ui/painting/image_decoder.cc(289)] Could not decompress image.

成熟的第三方库处理

wechat_assets_picker 库，提供了flutter仿微信相册的库，主要是UI的搭建。
wechat这个库依赖 photo_manager库，来提供相册数据、加载图片、内存管理。

解决思路：

Flutter Image widget转路径给自定义ImageProvider
ImageProvider根据路径生成图像byte list
通过桥调用native的实现
Android转给Glide库区加载，轻松解决内存问题。

flutter代码

Image包裹ImageProvider

        return Image(fit: BoxFit.contain,image: AssetEntityImageProvider(asset,isOriginal: widget.previewThumbSize == null,thumbSize: widget.previewThumbSize,));

Provider包裹桥接口

AssetEntityImageProvider extends ImageProvider<AssetEntityImageProvider> {
///...@overrideImageStreamCompleter load(AssetEntityImageProvider key,DecoderCallback decode,) {return MultiFrameImageStreamCompleter(codec: _loadAsync(key, decode),scale: key.scale,informationCollector: () {return <DiagnosticsNode>[DiagnosticsProperty<ImageProvider>('Image provider', this),DiagnosticsProperty<AssetEntityImageProvider>('Image key', key),];},);}
///... _loadAsync 重点Future<ui.Codec> _loadAsync(AssetEntityImageProvider key, DecoderCallback decode) async {assert(key == this);Uint8List data;///...data = await key.entity.thumbDataWithOption(_thumbOption(_thumbSize[0], _thumbSize[1]),);///...

调用photo_mananger里的桥

  /// Get thumb with size of option.Future<Uint8List?> thumbDataWithOption(ThumbOption option, {PMProgressHandler? progressHandler,}) async {assert(() {option.checkAssert();return true;}());/// Return null if asset is audio or other type, because they don't have such a thing.if (type == AssetType.audio || type == AssetType.other) {return null;}return PhotoManager._getThumbDataWithOption(id,option,progressHandler,);}

Android桥对应的代码

关键代码： resultHandler.reply(bos.toByteArray()) 这个byte[] 到Uint8List

    fun getThumbnailByGlide(ctx: Context,path: String,width: Int,height: Int,format: Bitmap.CompressFormat,quality: Int,result: MethodChannel.Result?) {val resultHandler = ResultHandler(result)Glide.with(ctx).load(File(path)).asBitmap().priority(Priority.IMMEDIATE).into(object : BitmapTarget(width, height) {override fun onResourceReady(resource: Bitmap, glideAnimation: GlideAnimation<in Bitmap>?) {super.onResourceReady(resource, glideAnimation)val bos = ByteArrayOutputStream()resource.compress(format, quality, bos)resultHandler.reply(bos.toByteArray())}override fun onLoadCleared(placeholder: Drawable?) {resultHandler.reply(null)}override fun onLoadFailed(e: Exception?, errorDrawable: Drawable?) {resultHandler.reply(null)}})}

简单修复方案

FutureBuilder<File>(future: asset.file,builder: (context, snapshot) {if (snapshot != null &&snapshot.data != null &&snapshot.connectionState == ConnectionState.done) {return Image.file(snapshot.data,fit: BoxFit.contain,cacheWidth: ScreenUtil.getScreenWidth(context).toInt(),cacheHeight: ScreenUtil.getScreenHeight(context).toInt(),);} else {return const SizedBox.shrink();}});