[Flutter] イメージをbase64形式で変換する

概要

Flutterで写真撮影機能で殺意絵した写真をサーバに転送する時、base64形式で転送する必要がある時があります。今回のブログポストではFlutterでイメージをbase64形式で変換する方法とbase64形式のイメージを画面に表示する方法について説明します。

写真撮影機能

Flutterで写真撮影機能を実装するためにはCameraプラグインを使う必要があります。Cameraプラグインを使って写真撮影機能を実装する方法については以前のブログポストを参考してください。

[Flutter] Cameraプラグインを使って写真を撮影する方法

イメージをbase64形式で変換する

Cameraプラグインを使って撮影した写真や携帯に保存されたイメージをbase64形式で変換するためにはdart:convertパッケージのbase64Encode関数を次のように使う必要があります。

import 'dart:io';
import 'dart:convert';
...
final image = await _cameraController.takePicture();

final bytes = File(image.path).readAsBytesSync();
final image64 = base64Encode(bytes);
...

まずイメージをdart:ioのFileを使って読み取って、dart:convertパッケージのbase64Encode関数を使ってbase64形式に変換します。

base64形式のイメージを画面に表示する

サーバで受け取ったbase64形式のイメージを画面に表示するためには下記のようにBase64Decoderを使ってbase64形式のイメージをbyte配列に変換した後、Image.memoryを使って画面に表示する必要があります。

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

完了

これでFlutterでイメージをbase64形式に変換する方法とbase64形式のイメージを画面に表示する方法について見てみました。サーバのAPIの仕様によって家mー時をbase64形式でやり取りする必要がある時があります、その時このブログを参考してください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

[Flutter] イメージをbase64形式で変換する

Flutterでイメージをbase64形式で変換する方法とbase64イメージを表示する方法について説明します。

目次

概要

写真撮影機能

イメージをbase64形式で変換する

base64形式のイメージを画面に表示する

完了

アプリ広報