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

【问题标题】：Flutter - convert and resize asset image to dart ui imageFlutter - 将资产图像转换和调整大小为 dart ui 图像
【发布时间】：2020-05-12 08:42:37
【问题描述】：

我正在尝试获取资源图像，将图像调整为任意宽度和高度，并将图像转换为 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;
}

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

断言失败：第 274 行 pos 12: 'bitmap.length == size': is not true

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

非常感谢您在解决此问题方面的任何帮助，在此先感谢。

【问题讨论】：

标签： image flutter dart

【解决方案1】：

自从能够从事这个副项目以来已经有一段时间了，但能够使用image 包完成转换和调整大小：

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;
}

【讨论】：

【解决方案2】：

您可以在不使用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;
}

【讨论】：