web-dev-qa-db-ja.com

FlutterでBASE64文字列を画像に変換する方法は？

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

imagelistbase64converterflutter
15
Charles Jr

Uint8List コンストラクタを使用して、Image.memoryをFlutter Imageウィジェットに変換できます。 （ Uint8List.fromList コンストラクターを使用して、必要に応じてListをUint8Listに変換します。）BASE64.encodeを使用して、他の方法を実行できます。

サンプルコードを次に示します。

screenshot

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をデータベースに保存する必要があります。

12
Collin Jackson

'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);
}
3
Amir.n3t

カメラの写真（一時フォルダー）を開き、ファイルを編集してから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)
1
Luís De Marchi
Uint8List _bytesImage;

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

_bytesImage = Base64Decoder().convert(_imgString);

Image.memory(_bytesImage)
1
Jeferson Rivera