Flutter - 将资产图像转换并调整大小为 dart ui 图像

Question

我正在尝试获取资产图像，将图像调整为任意宽度和高度，并将图像转换为 dart ui 图像，以便我可以使用drawImage方法在画布上绘制图像。这样我就可以针对不同的屏幕尺寸调整图像。

但是，我遇到了调整图像大小的问题。我尝试了几种不同的方法，但我管理的最好的方法是绘制正确的图像数据并裁剪图像而不是调整大小，以正确的大小使数据无效（错误解码静态），或者在失败时使用正确的图像数据调整图像大小。

我命名的进口是

import 'dart:io' as io;
import 'dart:ui' as ui;
import 'package:flutter/widgets.dart' as widgets;
import 'package:image/image.dart' as image;

我的一些尝试如下：

显示正确的图像数据而无法调整大小：

Future<ui.Image> loadUiImage(String imageAssetPath) async {
  widgets.Image widgetsImage = widgets.Image.asset(imageAssetPath, scale: 0.5);
  Completer<ui.Image> completer = Completer<ui.Image>();
  widgetsImage.image
    .resolve(widgets.ImageConfiguration(size: ui.Size(10, 10)))
    .addListener(widgets.ImageStreamListener((widgets.ImageInfo info, bool _){
      completer.complete(info.image);
    }));
  return completer.future;
}

尽管图像数据正确，但在不调整大小的情况下错误地裁剪图像：

Future<ui.Image> loadUiImage(String imageAssetPath) async {
  final ByteData data = await rootBundle.load(imageAssetPath);
  List<int> bytes = data.buffer.asUint8List();
  image.Image iconImage = image.Image.fromBytes(100, 100, bytes);
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(image.decodePng(image.encodePng(iconImage)).getBytes(), (ui.Image img) {
    return completer.complete(img);
  });
  return completer.future;
}

无效的图像数据，正确调整图像大小：

Future<ui.Image> loadUiImage(String imageAssetPath) async {
  final ByteData data = await rootBundle.load(imageAssetPath);
  List<int> bytes = data.buffer.asUint8List();
  image.Image iconImage = image.Image.fromBytes(100, 100, bytes);
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(image.encodePng(iconImage), (ui.Image img) {
    return completer.complete(img);
  });
  return completer.future;
}

我也尝试使用此处使用的 Bitmap 方法，但在提供的函数中遇到错误

失败的断言：第 274 行 pos 12：'bitmap.length == size'：不是真的

在我尝试调整图像大小后尝试使用。

我将不胜感激任何帮助解决此问题，在此先感谢。

Answer 1

您可以在不使用该image包的情况下实现此目的：

Future<ui.Image> getUiImage(String imageAssetPath, int height, int width) async {
  final ByteData assetImageByteData = await rootBundle.load(imageAssetPath);
  final codec = await ui.instantiateImageCodec(
    assetImageByteData.buffer.asUint8List(),
    targetHeight: height,
    targetWidth: width,
  );
  final image = (await codec.getNextFrame()).image;
}

Answer 2

自从能够在这个副项目上工作已经有一段时间了，但是能够使用图像包完成转换和调整大小：

import 'dart:ui' as ui;
import 'package:image/image.dart' as image;
import 'package:flutter/services.dart';

Future<ui.Image> getUiImage(String imageAssetPath, int height, int width) async {
  final ByteData assetImageByteData = await rootBundle.load(imageAssetPath);
  image.Image baseSizeImage = image.decodeImage(assetImageByteData.buffer.asUint8List());
  image.Image resizeImage = image.copyResize(baseSizeImage, height: height, width: width);
  ui.Codec codec = await ui.instantiateImageCodec(image.encodePng(resizeImage));
  ui.FrameInfo frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}