如何使用Flutter将BASE64字符串转换为Image？ [英] 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）; 
 image1 =照片; 
  

我收到以下错误...

List< int>类型的值无法分配给类型类型的变量

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

***更新

这是我的更新代码那仍然是一个错误。

  image1 = event.snapshot.value ['image']; 
 var image = BASE64.decode（image1.toString（））; 
 new Image.memory（图片），
  

错误是......

FormatException：无效长度必须是4的倍数

解决方案

您可以使用

  import'dart：async'; 
 import'dart：convert'; 
 import'dart：typed_data'; 
 import'package：flutter / material.dart'; 
导入'package：http / http.dart'为http; 
 
 void main（）{
 runApp（new MyApp（））; 
} 
 
类MyApp扩展StatelessWidget {
 @override 
 Widget构建（BuildContext上下文）{
返回新的MaterialApp（
主题：new ThemeData.dark（），
 home：new MyHomePage（），
）; 
} 
} 
 
 class MyHomePage扩展StatefulWidget {
 @override 
 State createState（）=> new MyHomePageState（）; 
} 
 
 class MyHomePageState扩展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（mount）{
 setState（（）{
 _base64 = BASE64.encode（response.bodyBytes）; 
}）; 
} 
}）（）; 
} 
 
 @override 
 Widget build（BuildContext context）{
 if（_base64 == null）
 return new Container（）; 
 Uint8List bytes = BASE64.decode（_base64）; 
返回新的支架（
 appBar：新AppBar（标题：新文本（'示例应用'）），
正文：新ListTile（
领先：新Image.memory（字节） ），
 title：new Text（_base64），
），
）; 
} 
} 
  

但是，存储大blob通常是一个坏主意数据库中的二进制数据。它没有发挥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字符串转换为Image？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！