Flutter中如何将资源图片加载为Image数据并在Canvas绘制

哎这个坑我之前做自定义绘制的时候刚踩过！确实Flutter里这俩Image很容易搞混——一个是用来在界面上展示的Widget（flutter/widgets.dart里的Image），另一个是dart:ui包里的Image，也就是Canvas.drawImage需要的底层图像数据结构。

我给你捋捋怎么把资源转成后者：

第一步：区分命名，避免冲突 #

先导入dart:ui的Image时用别名，防止和Widget类的Image重名：

import 'dart:ui' as ui;

第二步：异步加载资源为ui.Image #

因为图像加载是异步操作，一般在StatefulWidget的状态类里管理这个图像实例，步骤如下：

1. 在State类里声明变量：

   ui.Image? _customImage;
   ImageStreamListener? _imageListener; // 存监听，后续用来移除避免内存泄漏
   

2. 写加载方法并在initState里调用：

   @override
   void initState() {
     super.initState();
     _loadImage();
   }
   
   Future<void> _loadImage() async {
     // 本地资源用AssetImage，网络图直接换NetworkImage即可
     final imageProvider = AssetImage('assets/your_image.png');
     // 创建图像配置，关联上下文获取设备适配信息
     final imageConfig = createLocalImageConfiguration(context);
     // 解析出图像流
     final imageStream = imageProvider.resolve(imageConfig);
     // 添加监听，加载完成后拿到ui.Image
     _imageListener = ImageStreamListener((ImageInfo info, bool _) {
       setState(() {
         _customImage = info.image;
       });
     });
     imageStream.addListener(_imageListener!);
   }
   

3. 在dispose里移除监听：

   @override
   void dispose() {
     if (_imageListener != null) {
       AssetImage('assets/your_image.png')
           .resolve(createLocalImageConfiguration(context))
           .removeListener(_imageListener!);
     }
     super.dispose();
   }
   

第三步：在CustomPainter里使用 #

把加载好的_customImage传给自定义绘制器，在paint方法里调用：

class MyCustomPainter extends CustomPainter {
  final ui.Image? image;

  MyCustomPainter(this.image);

  @override
  void paint(Canvas canvas, Size size) {
    if (image == null) return;
    // 示例：在画布左上角绘制原图
    canvas.drawImage(image!, Offset(0, 0), Paint());
    // 如果需要缩放，可以用drawImageRect实现适配
    // canvas.drawImageRect(
    //   image!,
    //   Rect.fromLTWH(0, 0, image!.width.toDouble(), image!.height.toDouble()),
    //   Rect.fromLTWH(0, 0, size.width, size.height),
    //   Paint(),
    // );
  }

  @override
  bool shouldRepaint(covariant MyCustomPainter oldDelegate) {
    return oldDelegate.image != image;
  }
}

最后：在界面中使用CustomPaint #

@override
Widget build(BuildContext context) {
  return CustomPaint(
    painter: MyCustomPainter(_customImage),
    size: Size.infinite, // 或者指定你需要的固定尺寸
  );
}

⚠️ 注意：如果是本地资源，一定要在pubspec.yaml里配置资源路径，比如：

flutter:
  assets:
    - assets/your_image.png

这样就能顺利把资源转换成Canvas需要的图像数据结构啦！

内容的提问来源于stack exchange，提问作者Max Lambertini