探索Flutter_Image显示Webp逻辑

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 简介最近探索了一下新增Flutter的Image widget对webp做一个stopAnimation的拓展的Api,顺便了解一下Image整个结构和对一些多帧图片的处理。 我们先看看Image的一个类图结构。

简介

最近探索了一下新增Flutter的Image widget对webp做一个stopAnimation的拓展的Api,顺便了解一下Image整个结构和对一些多帧图片的处理。 我们先看看Image的一个类图结构。


image.png


其中:


ImageProvider 提供加载图片的入口,不同的图片资源加载方式不一样,只要重写其load方法即可。同样,缓存图片的key值也有其生成。

FileImage 负责读取文件图片的数据,读取到的文件数据转化成ui.Codec对象交给ImageStreamCompleter去处理解析。

ImageStreamCompleter就是逐帧解析图片的类,生成之后会加入ImageCache,下载可以从缓存中得到。

ImageStream是处理Image Resource的,ImageState通过ImageStream与ImageStreamCompleter建立联系。ImageStream里也存储着图片加载完毕的监听回调。

MultiFrameImageStreamCompleter就是多帧图片解析器。 Flutter imgae支持的图片格式为:JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP。Flutter Image是显示图片的一个Widget。 Flutter Image的几个构造方法:

image.png

Image

从Image的构造体上看,ImageProvider才是图片提供方,所以我们后面会看看ImageProvider究竟是要做点什么的。 其他的参数是一些图片的属性和一些builder。

ImageState

关键代码:

void didUpdateWidget(Image oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (_isListeningToStream &&
        (widget.loadingBuilder == null) != (oldWidget.loadingBuilder == null)) {
      _imageStream.removeListener(_getListener(oldWidget.loadingBuilder));
      _imageStream.addListener(_getListener());
    }
    if (widget.image != oldWidget.image)
      _resolveImage();
  }

ImageProvider

其实ImageProvider是一个抽象类,让需要定制的子类去做一些实现。

比如:FileImage、MemoryImage、ExactAssetImage等等。其中对FileImage的代码进行了一些分析。

class FileImage extends ImageProvider<FileImage> {
  /// Creates an object that decodes a [File] as an image.
  ///
  /// The arguments must not be null.
  const FileImage(this.file, { this.scale: 1.0 })
      : assert(file != null),
        assert(scale != null);
  /// The file to decode into an image.
  final File file;
  /// The scale to place in the [ImageInfo] object of the image.
  final double scale;
  @override
  Future<FileImage> obtainKey(ImageConfiguration configuration) {
    return new SynchronousFuture<FileImage>(this);
  }
  @override
  ImageStreamCompleter load(FileImage key) {
    return new MultiFrameImageStreamCompleter(
      codec: _loadAsync(key),
      scale: key.scale,
      informationCollector: (StringBuffer information) {
        information.writeln('Path: ${file?.path}');
      }
    );
  }
  Future<ui.Codec> _loadAsync(FileImage key) async {
    assert(key == this);
    final Uint8List bytes = await file.readAsBytes();
    if (bytes.lengthInBytes == 0)
      return null;
    return await ui.instantiateImageCodec(bytes);
  }
  @override
  bool operator ==(dynamic other) {
    if (other.runtimeType != runtimeType)
      return false;
    final FileImage typedOther = other;
    return file?.path == typedOther.file?.path
        && scale == typedOther.scale;
  }
  @override
  int get hashCode => hashValues(file?.path, scale);
  @override
  String toString() => '$runtimeType("${file?.path}", scale: $scale)';
}

FileImage重写了 obtainKey、load的方法。但是在什么地方会调用这两个重写的方法呢?那肯定是ImageProvider这个父类了。

@optionalTypeArgs
abstract class ImageProvider<T> {
  /// Abstract const constructor. This constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const ImageProvider();
  /// Resolves this image provider using the given `configuration`, returning
  /// an [ImageStream].
  ///
  /// This is the public entry-point of the [ImageProvider] class hierarchy.
  ///
  /// Subclasses should implement [obtainKey] and [load], which are used by this
  /// method.
  ImageStream resolve(ImageConfiguration configuration) {
    assert(configuration != null);
    final ImageStream stream = new ImageStream();
    T obtainedKey;
    obtainKey(configuration).then<void>((T key) {
      obtainedKey = key;
      stream.setCompleter(PaintingBinding.instance.imageCache.putIfAbsent(key, () => load(key)));
    }).catchError(
      (dynamic exception, StackTrace stack) async {
        FlutterError.reportError(new FlutterErrorDetails(
          exception: exception,
          stack: stack,
          library: 'services library',
          context: 'while resolving an image',
          silent: true, // could be a network error or whatnot
          informationCollector: (StringBuffer information) {
            information.writeln('Image provider: $this');
            information.writeln('Image configuration: $configuration');
            if (obtainedKey != null)
              information.writeln('Image key: $obtainedKey');
          }
        ));
        return null;
      }
    );
    return stream;
  }
  /// Converts an ImageProvider's settings plus an ImageConfiguration to a key
  /// that describes the precise image to load.
  ///
  /// The type of the key is determined by the subclass. It is a value that
  /// unambiguously identifies the image (_including its scale_) that the [load]
  /// method will fetch. Different [ImageProvider]s given the same constructor
  /// arguments and [ImageConfiguration] objects should return keys that are
  /// '==' to each other (possibly by using a class for the key that itself
  /// implements [==]).
  @protected
  Future<T> obtainKey(ImageConfiguration configuration);
  /// Converts a key into an [ImageStreamCompleter], and begins fetching the
  /// image.
  @protected
  ImageStreamCompleter load(T key);
  @override
  String toString() => '$runtimeType()';
}

该方法的作用就是创建一个ImageStream,并且ImageConfiguration作为key从ImageCache中获取ImageCompleter,设置到ImageStream上面。而ImageCompleter是为了设置一些回调和帮助ImageStream设置图片的一个类。


ImageConfiguration是对于ImageCompleter的一些配置。


ImageCache是对于ImageCompleter的缓存。 ImageStreamCompleter putIfAbsent(Object key, ImageStreamCompleter loader(), { ImageErrorListener onError }) 这个方法在resolve方法中是一个关键方法。

ImageStreamCompleter putIfAbsentImageStreamCompleter putIfAbsent(Object key, ImageStreamCompleter loader()) {
    assert(key != null);
    assert(loader != null);
    ImageStreamCompleter result = _cache[key];
    if (result != null) {
      // Remove the provider from the list so that we can put it back in below
      // and thus move it to the end of the list.
      _cache.remove(key);
    } else {
      if (_cache.length == maximumSize && maximumSize > 0)
        _cache.remove(_cache.keys.first);
      result = loader();
    }
    if (maximumSize > 0) {
      assert(_cache.length < maximumSize);
      _cache[key] = result;
    }
    assert(_cache.length <= maximumSize);
    return result;
 }

这个方法是在imageCache里面的,提供的是内存缓存api的入口方法,putIfAbsent会先通过key获取之前的ImageStreamCompleter对象,这个key就是NetworkImage对象,当然我们也可以重写obtainKey方法自定义key,如果存在则直接返回,如果不存在则执行load方法加载ImageStreamCompleter对象,并将其放到首位(最少最近使用算法)。 也就是说ImageProvider已经实现了内存缓存:默认缓存图片的最大个数是1000,默认缓存图片的最大空间是10MiB。 第一次加载图片肯定是没有缓存的,所以会调用loader方法,那就是方法外面传进去的load()方法。


FileImage的load方法

@override
ImageStreamCompleter load(FileImage key) {
  return new MultiFrameImageStreamCompleter(
    codec: _loadAsync(key),
    scale: key.scale,
    informationCollector: (StringBuffer information) {
      information.writeln('Path: ${file?.path}');
    }
  );
}
Future<ui.Codec> _loadAsync(FileImage key) async {
  assert(key == this);
  final Uint8List bytes = await file.readAsBytes();
  if (bytes.lengthInBytes == 0)
    return null;
  return await ui.instantiateImageCodec(bytes);
}

load方法中使用了一个叫MultiFrameImageStreamCompleter的类:

MultiFrameImageStreamCompleter({
  @required Future<ui.Codec> codec,
  @required double scale,
  InformationCollector informationCollector
}) : assert(codec != null),
     _informationCollector = informationCollector,
     _scale = scale,
     _framesEmitted = 0,
     _timer = null {
  codec.then<void>(_handleCodecReady, onError: (dynamic error, StackTrace stack) {
    FlutterError.reportError(new FlutterErrorDetails(
      exception: error,
      stack: stack,
      library: 'services',
      context: 'resolving an image codec',
      informationCollector: informationCollector,
      silent: true,
    ));
  });
}

MultiFrameImageStreamCompleter是ImageStreamCompleter的子类,为了处理多帧的图片加载,Flutter的Image支持加载webp,通过MultiFrameImageStreamCompleter可以对webp文件进行解析,MultiFrameImageStreamCompleter拿到外面传入的codec数据对象,通过handleCodecReady来保存Codec,之后调用decodeNextFrameAndSchedule方法,从Codec获取下一帧图片数据和把数据通知回调到Image,并且开启定时解析下一帧图片数据。


到此为止,基本dart流程就走完了,所以需要做stopAnimation和startAnimation的改造就应该这这个MultiFrameImageStreamCompleter入手了。


最后

整个在Dart层面Image解析webp的流程就这样,


相关文章
|
缓存
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
762 0
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(一)
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(一)
442 0
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(一)
|
16天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
4月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
5天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
19 3
|
26天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
65 7
|
5天前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
23 0
|
5天前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
10 0
|
1月前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
44 6
|
1月前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)