将 base64 字符串转换为 Image 类并返回答案

【问题标题】：Convert base64 string to Image class and back将 base64 字符串转换为 Image 类并返回
【发布时间】：2020-07-06 13:11:23
【问题描述】：

我有一个简单的表格，我想通过 MOOR 创建和维护它。下面是表定义：

class Plants extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get name => text()();
  TextColumn get image => text().map(const ImageConverter()).nullable()();
}

如您所见，我有一个image 字段，我想使用Image 到base64 转换并返回。请注意，我指的是 Flutter Image class，而不是小部件。我已经找到the topic，在 Image widget 和 base64 之间发生了转换，但从架构的角度来看，在我看来，在数据层。这是我到目前为止所做的：

import 'package:image/image.dart';
import 'dart:convert';
import 'dart:typed_data';
import 'package:moor/moor.dart';

class ImageConverter extends TypeConverter<Image, String> {
  Image _imageFromBase64String(String base64String) {
    return null; // <--- missing implementation
  }

  Uint8List _dataFromBase64String(String base64String) {
    return base64Decode(base64String);
  }

  String _base64String(Uint8List data) {
    return base64Encode(data);
  }

  const ImageConverter();
  @override
  Image mapToDart(String fromDb) {
    if (fromDb == null) {
      return null;
    }
    return _imageFromBase64String(fromDb);
  }

  @override
  String mapToSql(Image value) {
    if (value == null) {
      return null;
    }

    return _base64String(value.getBytes());
  }
}

如您所见，我没有问题（我猜）实现Image 到base64 的转换，但是我很难实现base64 到Image。

【问题讨论】：

您不会使用instantiateImageCodec 创建一个编解码器，等待getNextFrame，然后从中提取图像吗？请注意，要做到这一点，您需要确保将图像字节编码为 PNG 以保留几何等内容。 getBytes 从何而来？ image有这种方法吗？
您能提供一个关于您的提案的代码 sn-p 吗？是的，getBytes 来自Image class
我只看到toByteData。你能提供一个显示这种其他方法的链接吗？
你是这个意思吗？ pub.dev/documentation/image/latest/image/Image/getBytes.html 来自另一个 Image 类，而不是您提供链接的那个。
是的，我的错，你的链接是正确的。

标签： flutter flutter-moor

【解决方案1】：

请注意，问题中的链接不正确。问题指的是image 包中的Image 类 - 请参阅https://pub.dev/documentation/image/latest/image/Image-class.html

你需要一对这样的函数：

Image b64ToImage(int width, int height, String b64) {
  return Image.fromBytes(width, height, base64.decode(b64));
}

String imageToB64(Image image) => base64.encode(image.getBytes());

getBytes 为您返回一个 NxM 32 位像素数组（默认为 RGBA 顺序），但您不知道图像的几何形状。 100x200 图像将返回 80,000 字节数组 - 但 200x100 图像也将返回！当你重新构建图像时，你需要告诉它原来的宽度和高度。

这就是存在 BMP 等文件格式的原因。它们在像素数组前面加上一个包含宽度、高度、像素深度、像素顺序等信息的标题。该包有一个 BMP 解码器，但没有编码器。如果您想将宽度和高度编码为字节数组并因此编码为 base64 字符串，您可以实现一个简单的 BMP 编码器。（见partial answer。）

【讨论】：