如何使用 Flutter 将 BASE64 字符串转换为图像? [英] How to convert BASE64 string into Image with Flutter?

问题描述

我正在将保存在 Firebase 数据库中的图像转换为 Base64，并希望进行解码和编码.我研究过类似的问题，但仍然出现错误.这是我目前所拥有的?

var image1 = String;var pic = event.snapshot.value['image'];var photo = BASE64.decode(pic);图像 1 = 照片；

我收到以下错误...

List"类型的值不能分配给类型为Type"的变量

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

*** 更新

这是我更新后的代码，但仍然抛出错误.

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

错误是...

FormatException: Invalid Length must be a multiple of 4

解决方案

您可以使用

import 'dart:async';导入飞镖:转换"；导入 'dart:typed_data';导入'包:颤振/材料.dart';导入 'package:http/http.dart' 作为 http；无效主(){运行应用程序(新的我的应用程序())；}class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回新的 MaterialApp(主题:新的 ThemeData.dark()，主页:新的我的主页()，);}}class MyHomePage 扩展了 StatefulWidget {@覆盖状态 createState() =>新的 MyHomePageState();}类 MyHomePageState 扩展了 State{字符串_base64;@覆盖无效的初始化状态(){super.initState();(() 异步{http.Response 响应 = 等待 http.get('https://flutter.io/images/flutter-mark-square-100.png',);如果(安装){设置状态((){_base64 = BASE64.encode(response.bodyBytes);});}})();}@覆盖小部件构建(BuildContext 上下文){如果(_base64 == null)返回新容器()；Uint8List 字节 = BASE64.decode(_base64);返回新的脚手架(appBar: new AppBar(title: new Text('Example App')),正文:新的ListTile(领先:新的Image.memory(字节)，标题:新文本(_base64)，),);}}

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

I'm converting images saved in my Firebase database to Base64 and would like to decode and encode. I've researched similar questions, but am still getting errors. Here is what I have so far?

var image1 = String;

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

I'm getting the following error...

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

If you could please provide a reverse process for encoding an image into Base64 so they may be saved back to Firebase, that would be appreciated.

*** UPDATE

Here is my updated code that's still throwing an error.

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

The error is...

FormatException: Invalid Length must be a multiple of 4

解决方案

You can convert a Uint8List to a Flutter Image widget using the Image.memory constructor. (Use the Uint8List.fromList constructor to convert a List to Uint8List if necessary.) You can use BASE64.encode to go the other way.

Here's some sample code.

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

However, it's generally a bad idea to store large blobs of binary data in your database. It's not playing to the strengths of Firebase realtime database and you will end up wasting bandwidth transmitting data you don't need as well as unnecessary encoding and decoding. You should use the firebase_storage plugin instead, storing the path or download URL of the image in the database.

这篇关于如何使用 Flutter 将 BASE64 字符串转换为图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！