如何在Canvas对象上绘制从资产加载的图像

Question

我正在玩Flutter，并且已经使用CustomPainterclass 实现了一个自定义的小部件。

原始文件已被充分记录。但是，似乎存在Image（窗口小部件）和Image（数据结构），因为如果我确定一个Image（窗口小部件）我无法将其传递给Canvas方法，drawImage因为它需要另一种类型的Image。

问题是，我无法确定如何将资源加载到Image数据结构中。

有人解决过这个问题吗？

[edit]感谢rmtmckenzie，我这样解决了它：

rootBundle.load("assets/galaxy.jpg").then( (bd) {
  Uint8List lst = new Uint8List.view(bd.buffer);
  UI.instantiateImageCodec(lst).then( (codec) {
    codec.getNextFrame().then(
      (frameInfo) {
        bkImage = frameInfo.image;
        print ("bkImage instantiated: $bkImage");
        }
      }
    );
  });
});

Answer 1

一个有效的解决方案：

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;

/// Load [Image] from asset path.
/// https://stackoverflow.com/a/61338308/1321917
Future<ui.Image> loadUiImage(String assetPath) async {
  final data = await rootBundle.load(assetPath);
  final list = Uint8List.view(data.buffer);
  final completer = Completer<ui.Image>();
  ui.decodeImageFromList(list, completer.complete);
  return completer.future;
}

Answer 2

为此，您需要直接加载图像，然后实例化它。

我将把加载部分留给您-您要么直接执行Http请求，要么使用AssetBundle.load；或者您可以使用NetworkImage / AssetImage（它们都继承ImageProvider-请参阅包含示例的文档）。

如果直接将加载路线，然后可以实例化的图像（在编解码器的形式- >图像- >帧），使用instantiateImageCodec。

如果您选择其他路线，则必须像在文档中一样收听流等内容，但是您应该直接获取图像。

编辑：感谢OP在他的问题中包括工作代码。这是对他有用的东西：

rootBundle.load("assets/galaxy.jpg").then( (bd) {
  Uint8List lst = new Uint8List.view(bd.buffer);
  UI.instantiateImageCodec(lst).then( (codec) {
    codec.getNextFrame().then(
      (frameInfo) {
        bkImage = frameInfo.image;
        print ("bkImage instantiated: $bkImage");
        }
      }
    );
  });
});