如何使用 Flutter 将 BASE64 字符串转换为图像？

Question

我正在将保存在我的 Firebase 数据库中的图像转换为 Base64，并且想要解码和编码。我研究过类似的问题，但仍然遇到错误。这是我目前所拥有的？

var image1 = String;

var pic = event.snapshot.value['image'];
var photo = BASE64.decode(pic);
image1 = photo;

我收到以下错误...

A value of type "List<int>" cannot be assigned to a variable of type "Type"

如果您能提供将图像编码为 Base64 的逆过程，以便将它们保存回 Firebase，我们将不胜感激。

*** 更新

这是我更新后的代码，但它仍然会引发错误。

image1 = event.snapshot.value['image'];
var image = BASE64.decode(image1.toString());
new Image.memory(image),

错误是...

FormatException: Invalid Length must be a multiple of 4

Answer 1

如果需要，您可以使用 Image.memory constructor. (Use the Uint8List.fromList 构造函数将 Uint8List 转换为 Flutter Image 小部件，将 List 转换为 Uint8List。）可以使用 BASE64.encode 走另一条路。

这是一些示例代码。

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  String _base64;

  @override
  void initState() {
    super.initState();
    (() async {
      http.Response response = await http.get(
        'https://flutter.io/images/flutter-mark-square-100.png',
      );
      if (mounted) {
        setState(() {
          _base64 = BASE64.encode(response.bodyBytes);
        });
      }
    })();
  }

  @override
  Widget build(BuildContext context) {
    if (_base64 == null)
      return new Container();
    Uint8List bytes = BASE64.decode(_base64);
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new ListTile(
        leading: new Image.memory(bytes),
        title: new Text(_base64),
      ),
    );
  }
}

但是，在数据库中存储大块二进制数据通常不是一个好主意。它没有发挥 Firebase 实时数据库的优势，您最终会浪费带宽传输不需要的数据以及不必要的编码和解码。您应该改用 firebase_storage 插件，将图像的路径或下载 URL 存储在数据库中。

Answer 2

Uint8List _bytesImage;

String _imgString = 'iVBORw0KGgoAAAANSUhEUg.....';

_bytesImage = Base64Decoder().convert(_imgString);

Image.memory(_bytesImage)

Answer 3

使用 'dart:convert' 包

有一种更简单的方法

Image.memory(base64Decode(base64String));

实现和一些有用的方法：

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/widgets.dart';


Image imageFromBase64String(String base64String) {
  return Image.memory(base64Decode(base64String));
}

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

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

Answer 4

要打开相机照片（临时文件夹），编辑文件然后将其转换为 Base64：

代码：

import 'dart:convert';
import 'package:image/image.dart' as ImageProcess;

File file = File(imagePath);
final _imageFile = ImageProcess.decodeImage(
  file.readAsBytesSync(),
);

...edit file...

String base64Image = base64Encode(ImageProcess.encodePng(_imageFile));

解码并显示：

import 'dart:convert';
import 'package:image/image.dart' as ImageProcess;

final _byteImage = Base64Decoder().convert(base64Image);
Widget image = Image.memory(_byteImage)

Answer 5

通过这种简单的方法，我可以在 flutter 中设置图像。 image 属性是 base64 图片作为字符串，例如：

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb2

尝试下一个：

Widget getImagenBase64(String imagen) {
    _imageBase64 = imagen;
    const Base64Codec base64 = Base64Codec();
    if (_imageBase64 == null) return new Container();
    bytes = base64.decode(_imageBase64);
    return Image.memory(
          bytes,
          width: 200,
          fit: BoxFit.fitWidth,
       
    );
  }

我希望这对你有用。编码愉快。

Answer 6

进口

import 'dart:convert';
import 'dart:typed_data';

从屏幕加载数据并分配给这个变量

    Uint8List _bytes;
  _bytes = Base64Decoder().convert("iVBORw0KGgoAAAANSUhEUgAAANgAAA......");

在代码树结构小部件中

Image.memory(_bytes)

如何使用 Flutter 将 BASE64 字符串转换为图像？

How to convert BASE64 string into Image with Flutter?

base64

image

list

converter

flutter