[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 사양에 따라 이미지를 base64 형식으로 주고 받아야 할 때가 있는데, 이때 이 블로그를 참고하시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.