如何用Flutter将BASE64字符串转换为Image?

6mw9ycah  于 2023-06-07  发布在  Flutter
关注(0)|答案(7)|浏览(467)

我正在将保存在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

9o685dep

9o685dep1#

使用'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);
}
hfsqlsce

hfsqlsce2#

您可以使用Image.memory构造函数将Uint8List转换为Flutter Image小部件。(如果需要,可以使用Uint8List.fromList构造函数将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存储在数据库中。

q5lcpyga

q5lcpyga3#

Uint8List _bytesImage;

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

_bytesImage = Base64Decoder().convert(_imgString);

Image.memory(_bytesImage)
ffdz8vbo

ffdz8vbo4#

要打开相机照片(临时文件夹),编辑文件,然后将其转换为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)
ffx8fchx

ffx8fchx5#

进口

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

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

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

在代码树结构小部件中

Image.memory(_bytes)
u5rb5r59

u5rb5r596#

用这个简单的方法,我可以设置一个图像在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,
       
    );
  }

我希望这对你有用。快乐编程。

tzcvj98z

tzcvj98z7#

使用runtimeType检查类型,在我的例子中是String。我的函数返回Future<<U 'intList>>,我将其更改为Future<<s' tring>>,并使用Image.Memory,如下所示:Image.memory(base64Decode(_imageBytes!)
以下是我的完整代码:

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

import 'package:flutter/material.dart';

import 'getResponseFromNodeApi.dart';
import 'getResponseFromStabilityAi.dart';

class MyImageWidget extends StatefulWidget {
  const MyImageWidget({Key? key}) : super(key: key);

  @override
  _MyImageWidgetState createState() => _MyImageWidgetState();
}

class _MyImageWidgetState extends State<MyImageWidget> {
  String? _imageBytes;
  String? _errorMessage;

  @override
  void initState() {
    super.initState();

    _generateImage();
  }

  Future<void> _generateImage() async {
    setState(() {
      _imageBytes = null;
      _errorMessage = null;
    });

    try {
      // final bytes = await getResponseFromStabilityAi();
      final bytes = await getResponseFromNodeApi(textPrompt: 'light House');
      // List<int> bytes2 = utf8.encode(bytes as String);
      setState(() {
        _imageBytes = bytes;
      });
    } catch (e) {
      setState(() {
        print(e);
        _errorMessage = 'Failed to generate image: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Generated Image'),
      ),
      body: Center(
        child: _imageBytes != null
            ? Image.memory(base64Decode(_imageBytes!))
            : _errorMessage != null
            ? Text(_errorMessage!)
            : const CircularProgressIndicator(),
      ),
    );
  }
}

希望这能帮上忙

相关问题