[- Flutter 技能篇 -] ui.Image加载探索

想必大家Image组件都玩得挺6的，那么如何在Canvas上画一个图片，实现图片的放大等变换又该如何操呢？如何去监听一个图片流。这些Image组件就无法完成了。

---

代码语言：javascript复制

import 'dart:ui' as ui;
class ImagePage extends StatefulWidget {
  ImagePage({Key key,}):super(key:key);
  @override
  _ImagePageState createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomPaint(painter: ImagePainter(),),
    );
  }
}

class ImagePainter extends CustomPainter {

  Paint mainPaint;
  ImagePainter(){
    mainPaint=Paint()..isAntiAlias=true;
  }
  
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(Image.asset("images/wy_300x200.jpg"), //报错
        Offset(0,0), mainPaint);
  }
  
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}
复制代码

---

1.如何使用Canvas绘制图片

上面在Canvas的drawImage中，你会看到一个Image参数，你会想，这不好办吗？Image传呗！ 但是你传入一个Image组件它会神奇般地报错：意思是说人家要的是ui/painting文件的Image。

1.1.Canvas绘制图片源码及Image源码

代码语言：javascript复制

---->[sky_engine/lib/ui/painting.dart:Canvas#drawImage]----
void drawImage(Image image, Offset p, Paint paint) {
  assert(image != null); // image is checked on the engine side
  assert(_offsetIsValid(p));
  assert(paint != null);
  _drawImage(image, p.dx, p.dy, paint._objects, paint._data);
}

当跳入Image中是发现是ui/painting的Image,而且该类被私有化构造 就说明无法被直接创建，更有意思的是几乎都是native方法。

代码语言：javascript复制

---->[sky_engine/lib/ui/painting.dart:Image]----
@pragma('vm:entry-point')
class Image extends NativeFieldWrapperClass2 {
  @pragma('vm:entry-point')
  Image._();//私有化构造
  
  int get width native 'Image_width';//获取宽
  int get height native 'Image_height';//获取高
  
  Future<ByteData> toByteData({ImageByteFormat format = ImageByteFormat.rawRgba}) {//转换成字节数据
    return _futurize((_Callback<ByteData> callback) {
      return _toByteData(format.index, (Uint8List encoded) {
        callback(encoded?.buffer?.asByteData());
      });
    });
  }
  String _toByteData(int format, _Callback<Uint8List> callback) native 'Image_toByteData';

  void dispose() native 'Image_dispose';//释放图片

  @override
  String toString() => '[$widthu00D7$height]';
}

---

1.2.通过instantiateImageCodec获取图片编解码器

既然无法创建对象，那怎么玩？源码中为我们指明道路：使用instantiateImageCodec 那instantiateImageCodec又是什么鬼。它是返回一个Future的方法，而且传入一个Uint8List 也许这时你会说: 好复杂，臣妾做不到。我不画了还不行吗。稍安勿躁,先看Codec何许人也...

代码语言：javascript复制

To obtain an [Image] object, use [instantiateImageCodec].

---->[sky_engine/lib/ui/painting.dart:instantiateImageCodec]----
Future<Codec> instantiateImageCodec(Uint8List list, {
  int targetWidth,
  int targetHeight,
}) {
  return _futurize(
    (_Callback<Codec> callback) => _instantiateImageCodec(list, callback, null, targetWidth ?? _kDoNotResizeDimension, targetHeight ?? _kDoNotResizeDimension)
  );
}

Codec是一个图片编解码器的句柄，这还了得，简直是极品红装啊。它也是私有化构造 所以显得instantiateImageCodec是多么重要。其中getNextFrame方法返回FrameInfo的未来对象 看到Frame你应该立刻联想到图片帧,于是看到在FrameInfo中Image对象就在那等着你。

代码语言：javascript复制

---->[sky_engine/lib/ui/painting.dart:Codec]----
@pragma('vm:entry-point')
class Codec extends NativeFieldWrapperClass2 {
  @pragma('vm:entry-point')
  Codec._();
  
Future<FrameInfo> getNextFrame() {
  return _futurize(_getNextFrame);
}

---->[sky_engine/lib/ui/painting.dart:FrameInfo]----
@pragma('vm:entry-point')
class FrameInfo extends NativeFieldWrapperClass2 {
  @pragma('vm:entry-point')
  FrameInfo._();

  Duration get duration => Duration(milliseconds: _durationMillis);
  int get _durationMillis native 'FrameInfo_durationMillis';

  Image get image native 'FrameInfo_image';//获取Image对象。
}
复制代码

好了，现在似乎一条路已经走通了，唯一一点就是Uint8List的图片数据如何获取 如果你不知道，那么至少可以先写出下面的这个方法：

代码语言：javascript复制

//通过[Uint8List]获取图片
Future<ui.Image> loadImageByUint8List(Uint8List list) async{
  ui.Codec codec= await ui.instantiateImageCodec(list);
  ui.FrameInfo frame= await codec.getNextFrame();
  return frame.image;
}

---

1.3.绘制你的第一张图

这就要考验基本功了，记得在File中有一个方法可以将文件读成Uint8List

代码语言：javascript复制

//通过 文件读取Image
Future<ui.Image> loadImageByFile(String path) async{
  var list =await File(path).readAsBytes();
  return loadImageByUint8List(list);
}

这里将一张图片放入缓存文件夹。再用FutureBuilder优雅地将未来的Image对象传入画板中 在画板中当_image非空时就可以将Image对象绘制出来。

代码语言：javascript复制

---->[ImagePage.dart:_ImagePageState#build]----
class _ImagePageState extends State<ImagePage> {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder<ui.Image>(
        future: loadImageByFile("/data/data/com.toly1994.flutter_image/cache/wy_300x200.jpg"),
        builder:(context,snapshot)=>CustomPaint(
          painter: ImagePainter(snapshot.data),
        ),
      ),
    );
  }
}

---->[ImagePage.dart:ImagePainter#paint]----
@override
void paint(Canvas canvas, Size size) {
  if (_image != null) {
    canvas.drawImage(_image, Offset(0, 0), mainPaint);
  }
}

也许细心的你可以看到instantiateImageCodec中有两个键值参数，可以确定图片加载出来的宽高 未了使用方便，这里提取一个ImageLoader用于加载图片,使用单例模式：使用 ImageLoader.loader.loadImageByFile("the path",width: 150,height: 100),就可以指定编解码图片的尺寸 实验表明尺寸越大，加载的速度就越慢，超过一定的尺寸image_decoder.cc会不允许加载

代码语言：javascript复制

---->[ImageLoader.dart#ImageLoader]----
class ImageLoader {

  ImageLoader._();//私有化构造
  static final ImageLoader loader= ImageLoader._();//单例模式

  //通过 文件读取Image
  Future<ui.Image> loadImageByFile(
    String path, {
    int width,
    int height,
  }) async {
    var list = await File(path).readAsBytes();
    return loadImageByUint8List(list, width: width, height: height);
  }

//通过[Uint8List]获取图片,默认宽高[width][height]
  Future<ui.Image> loadImageByUint8List(
    Uint8List list, {
    int width,
    int height,
  }) async {
    ui.Codec codec = await ui.instantiateImageCodec(list,
        targetWidth: width, targetHeight: height);
    ui.FrameInfo frame = await codec.getNextFrame();
    return frame.image;
  }
}

---

2.从ImageProvider获取及Image

如果是Asset图片资源或是网络图片如何获取Image呢？ ImageProvider有一个resolve方法可以返回一个图片流ImageStream 作为它孩子的几种图片加载方式都会有该方法，切入点便在此处：

2.1 ：ImageProvider相关源码

代码语言：javascript复制

---->[src/painting/image_provider.dart:ImageProvider#resolve]----
ImageStream resolve(ImageConfiguration configuration) {
    //略...
}

ImageStream可以添加一个监听器，其中传入ImageStreamListener对象

代码语言：javascript复制

---->[src/painting/image_stream.dart:ImageStream#addListener]----
void addListener(ImageStreamListener listener) {
  if (_completer != null)
    return _completer.addListener(listener);
  _listeners ??= <ImageStreamListener>[];
  _listeners.add(listener);
}

---

ImageStreamListener种有三个回调函数：onChunk在接收到一块字节触发监听 onError在错误时触发监听，onImage在完成时触发监听，如果只是想获取Image,onImage即可

代码语言：javascript复制

---->[src/painting/image_stream.dart:#ImageStreamListener]----
class ImageStreamListener {

  const ImageStreamListener(
    this.onImage, {
    this.onChunk,
    this.onError,
  }) : assert(onImage != null);
  
  final ImageListener onImage;
  final ImageChunkListener onChunk;
  final ImageErrorListener onError;

---

onImage对应的是ImageListener对象,在回调中可以获取ImageInfo对象 Image对象就在这里静静地等着你来。

代码语言：javascript复制

typedef ImageListener = void Function(ImageInfo image, bool synchronousCall);

---->[src/painting/image_stream.dart:17]----
class ImageInfo {
  const ImageInfo({ @required this.image, this.scale = 1.
    : assert(image != null),
      assert(scale != null);

  final ui.Image image;
  final double scale;
}

---

2.2 ：ImageProvider获取Image方法封装

这样的话，完全可以先封装一个通过ImageProvider获取Image的方法

代码语言：javascript复制

//通过ImageProvider读取Image
Future<ui.Image> loadImageByProvider(
  ImageProvider provider, {
  ImageConfiguration config = ImageConfiguration.empty,
}) async {
  Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回调
  ImageStreamListener listener;
  ImageStream stream = provider.resolve(config); //获取图片流
  listener = ImageStreamListener((ImageInfo frame, bool sync) {
    //监听
    final ui.Image image = frame.image;
    completer.complete(image); //完成
    stream.removeListener(listener); //移除监听
  });
  stream.addListener(listener); //添加监听
  return completer.future; //返回
}

---

2.3 ：ImageProvider加载图片

现在使用网络图片测试一下：

代码语言：javascript复制

  @override
  Widget build(BuildContext context) {
//var futureFile=ImageLoader.loader.loadImageByFile("/data/data/com.toly1994.flutter_image/cache/wy_300x200.jpg",width: 150,height: 100);

  //从资源部获取Image
  var futureAsset= ImageLoader.loader.loadImageByProvider(AssetImage("images/wy_300x200.jpg"));
  //从网络获取Image
  var imageUrl='https://user-gold-cdn.xitu.io/2018/7/9/1647cc06a3e9e9c4?imageView2'
      '/1/w/180/h/180/q/85/format/webp/interlace/1';
  var futureNet= ImageLoader.loader.loadImageByProvider(NetworkImage(imageUrl));
   //从文件获取Image
  var path="/data/data/com.toly1994.flutter_image/cache/wy_300x200.jpg";
  var futureFile= ImageLoader.loader.loadImageByProvider(FileImage(File(path)));
  
    return Container(
      child: FutureBuilder<ui.Image>(
        future:futureNet,
        builder:(context,snapshot)=>CustomPaint(
          painter: ImagePainter(snapshot.data),
        ),
      ),
    );
  }
}

不过发现ImageConfiguration的Size并不能改变图片的展示大小，那该怎么办？ 网络图片太大的，想要在本地保存一个缩略图，如何实现？

---

3.保存网络图片的缩略图

主要通过PictureRecorder对Canvas进行录制，使用Canvas对图片进行重定尺寸。

代码语言：javascript复制

///对图片重定义宽高尺寸[dstWidth],[dstHeight]
Future<ui.Image> _resize(ui.Image image, int dstWidth,int dstHeight) {
  var recorder = ui.PictureRecorder();//使用PictureRecorder对图片进行录制
  Paint paint = Paint();
  Canvas canvas = Canvas(recorder);
  double srcWidth = image.width.toDouble();
  double srcHeight = image.height.toDouble();
  canvas.drawImageRect(image, //使用drawImageRect对图片进行定尺寸填充
      Rect.fromLTWH(0, 0, srcWidth, srcHeight),
      Rect.fromLTWH(0, 0, dstWidth.toDouble() ,
          dstHeight.toDouble()), paint);
  return recorder.endRecording().toImage(dstWidth, dstHeight);//返回图片
}

---

这样就可以定义出重设尺寸的加载方式

代码语言：javascript复制

///缩放加载[provider],缩放比例[scale]
Future<ui.Image> scaleLoad(ImageProvider provider, double scale) async {
  var img = await loadImageByProvider(provider);
  return _resize(img, (img.width*scale).toInt(),(img.height*scale).toInt());
}

///缩放加载[provider],缩放比例[scale]
Future<ui.Image> resizeLoad(ImageProvider provider, int dstWidth,int dstHeight) async {
  var img = await loadImageByProvider(provider);
  return _resize(img, dstWidth,dstHeight);
}

---

如何将一个Image对象保存到本地？Image对象可以转化成字节流，再通过文件写入。

代码语言：javascript复制

//保存一个Image 
Future<File> saveImage(ui.Image image,String path,{format=ui.ImageByteFormat.png}) async{
  var file= File(path);
  if(!await file.exists()){
    await file.create(recursive: true);
  }
  ByteData byteData = await image.toByteData(format:format);
  Uint8List pngBytes = byteData.buffer.asUint8List();
  return file.writeAsBytes(pngBytes);
}

---

通过ImageLoader.loader.saveImage便可以将，缩小0.3倍的图片保存到本地。

代码语言：javascript复制

var imageUrl='https://user-gold-cdn.xitu.io/2018/7/9/1647cc06a3e9e9c4?imageView2'
var path="/data/data/com.toly1994.flutter_image/cache/net/wy_300x200_mini.png";

ImageLoader.loader.scaleLoad(NetworkImage(imageUrl),0.3)
        .then((img)=>ImageLoader.loader.saveImage(img,path));

---

4.网络图片的加载及缓存文件的有效期

对于缓存文件的期限，可以用一个追踪文件进行记录，在访问网络图片时首先看有没有缓存文件 然后看缓存文件有没有过期，如果过期，则删除，重新加载并缓存到本地。 当然你也可以更高级一点使用Json对或数据库，或xml配置来记录缓存的失效期。

代码语言：javascript复制

//通过ImageProvider读取Image
Future<ui.Image> loadNetImage(String url,
    {bool cache = true, scale = 1.0, int deathSecond = 60}) async {
  ui.Image image;
  var dir = await getTemporaryDirectory();
  var name = md5.convert(utf8.encode(url)).toString();
  var imgPath = File(path.join(dir.path, name));
  var fileDeath = File(imgPath.path   "._cache_death");
  
  if (cache && await imgPath.exists() && !await isCacheDeath(fileDeath)) {//表示有缓存且缓存有效
    //设置缓存，并且有缓存文件，并且缓存失效时，写入缓存
    image= await loadImageByProvider(FileImage(imgPath));
    print("使用缓存");
  }else{
    image = await loadImageByProvider(NetworkImage(url));
    var death = DateTime.now().millisecondsSinceEpoch   deathSecond   1000 * 60; //过期时间
    await fileDeath.writeAsString("$death");
    await saveImage(image, imgPath.path);
    print("使用网络图片---缓存已重置");
  }
 return _scale(image, scale);
}

/// 检查缓存是否过期
Future<bool> isCacheDeath(File fileDeath) async {
  if(!await fileDeath.exists()){
    return true;
  }
  var death = await fileDeath.readAsString();
  print("$death ==== ${DateTime.now().millisecondsSinceEpoch}--${int.parse(death) > DateTime.now().millisecondsSinceEpoch}");
  return int.parse(death) < DateTime.now().millisecondsSinceEpoch;
}
复制代码

---

文章到这就结束了，也许你是被开头的图片吸引来的，这里为了不扫你的兴，源码在此:

代码语言：javascript复制

/// 图片放大镜的配置类,将图片提供器中的[image],
/// 在半径为[radius]的[outlineColor]色圆中局部放大比例[rate]倍,
class BiggerConfig {
  double rate;
  ImageProvider image;
  double radius;
  Color outlineColor;
  bool isClip;

  BiggerConfig(
      {this.rate = 3,
      @required this.image,
      this.isClip = true,
      this.radius = 30,
      this.outlineColor = Colors.white});
}

class BiggerView extends StatefulWidget {
  BiggerView({
    Key key,
    @required this.config,
  }) : super(key: key);

  final BiggerConfig config;

  @override
  _BiggerViewState createState() => _BiggerViewState();
}

class _BiggerViewState extends State<BiggerView> {
  var posX = 0.0;
  var posY = 0.0;
  bool canDraw = false;
  var width =0.0;
  var height =0.0;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ui.Image>(
      future: ImageLoader.loader.loadImageByProvider(widget.config.image),
      builder: (context, snapshot) {
        if(snapshot.connectionState==ConnectionState.done){
           width = snapshot.data.width.toDouble() / widget.config.rate;
           height = snapshot.data.height.toDouble() / widget.config.rate;
        }

        return GestureDetector(
          onPanDown: (detail) {
            posX = detail.localPosition.dx;
            posY = detail.localPosition.dy;
            canDraw = true;
            setState(() {});
          },
          onPanUpdate: (detail) {
            posX = detail.localPosition.dx;
            posY = detail.localPosition.dy;
            if (judgeRectArea(posX, posY, width   2, height   2)) {
              setState(() {});
            }
          },
          onPanEnd: (detail) {
            canDraw = false;
            setState(() {});
          },
          child: Container(
            width: width,
            height: height,
            child: CustomPaint(
              painter: BiggerPainter(snapshot.data, posX, posY, canDraw,
                  widget.config.radius, widget.config.rate, widget.config.isClip),
            ),
          ),
        );
      },
    );
  }

  //判断落点是否在矩形区域
  bool judgeRectArea(double dstX, double dstY, double w, double h) {
    return (dstX - w / 2).abs() < w / 2 && (dstY - h / 2).abs() < h / 2;
  }
}

class BiggerPainter extends CustomPainter {
  final ui.Image _img; //图片
  Paint mainPaint; //主画笔
  Path circlePath; //圆路径
  double _x; //触点x
  double _y; //触点y
  double _radius; //圆形放大区域
  double _rate; //放大倍率
  bool _canDraw; //是否绘制放大图
  bool _isClip; //是否是裁切模式
  BiggerPainter(this._img, this._x, this._y, this._canDraw, this._radius, this._rate, this._isClip) {
    mainPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    circlePath = Path();
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Offset.zero & size;
    canvas.clipRect(rect); //裁剪区域
    if (_img != null) {
      Rect src =
          Rect.fromLTRB(0, 0, _img.width.toDouble(), _img.height.toDouble());
      canvas.drawImageRect(_img, src, rect, mainPaint);
      if (_canDraw) {
        var tempY = _y;
        _y = _y > 2 * _radius ? _y - 2 * _radius : _y   _radius;
        circlePath
            .addOval(Rect.fromCircle(center: Offset(_x, _y), radius: _radius));
        if (_isClip) {

          canvas.clipPath(circlePath);
          canvas.drawImage(
              _img, Offset(-_x * (_rate - 1), -tempY * (_rate - 1)), mainPaint);
          canvas.drawPath(circlePath, mainPaint);
       
        } else {
          canvas.drawImage(
              _img, Offset(-_x * (_rate - 1), -tempY * (_rate - 1)), mainPaint);
        }
      }
    }
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

/// 测试
var showBiggerView = Center(
  child: BiggerView(
    config: BiggerConfig(
        image: AssetImage("images/sabar.jpg"), rate: 3, isClip: true),
  ),
);

编程算法 缓存 canvas

0 人点赞