Chheangly Prum
Chheangly Prum

Reputation: 185

How to Convert Image to Base64 in Flutter

I'm trying to convert image to base64 but the result can't view as image.
Here my code below.

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

Result :

/9j/4Q+WRXhpZgAATU0AKgAAAAgACgEPAAIAAAAFAAAAhgEQAAIAAAAKAAAAjAEaAAUAAAABAAAAlgEbAAUAAAABAAAAngEoAAMAAAABAAIAAAExAAIAAABAAAAApgEyAAIAAAAUAAAA5gITAAMAAAABAAEAAIdpAAQAAAABAAAA+oglAAQAAAABAAAC3gAAAvh2aXZvAAB2aXZvIDE3MjMAAAAASAAAAAEAAABIAAAAAW1zbTg5NTNfNjQtdXNlciA5IFBLUTEuMTkwMTE4LjAwMSBjb21waWxlcjA0MDEyMDI1IHJlbGVhc2Uta2V5cwAyMDIwOjA0OjIzIDE1OjM3OjMyAAAcgpoABQAAAAEAAAJQgp0ABQAAAAEAAAJYiCIAAwAAAAEAAAAAiCcAAwAAAAEClgAAkAAABwAAAAQwMjIwkAMAAgAAABQAAAJgkAQAAgAAABQAAAJ0kQEABwAAAAQBAgMAkgEACgAAAAEAAAKIkgIABQAAAAEAAAKQkgMACgAAAAEAAAKYkgcAAwAAAAEAAQAAkgkAAwAAAAEAAAAAkgoABQAAAAEAAAKgkpAAAgAAAAcAAAKokpEAAgAAAAcAAAKwkpIAAgAAAAcAAAK4oAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIABAAAAAEAAAHgoAMABAAAAAEAAAKAoAUABAAAAAEAAAK/ohcAAwAAAAEAAgAAowEABwAAAAEBAAAApAIAAwAAAAEAAAAApAMAAwAAAAEAAAAApAUAAwAAAAEAHQAApAYAAwAAAAEAAAAAAAAAAAAAAAoAAAD6AAAAyAAAAGQyMDIwOjA0OjIzIDE1OjM3OjMyADIwMjA6MDQ6MjMgMTU6Mzc6MzIAAAASIwAAA+gAAADIAAAAZAAAAAAAAABkAAABfgAAAGQ0OTc4OTYAADQ5Nzg5NgA6NDk3ODk2AAACAAEAAgAAAARSOTgAAAIABwAAAAQwMTAwAAAAAAAAAQAFAAUAAAABAAAC8AAAAAAAAAD

But the result above can't view as image.
I used these website to check
codebeautify.org
base64decode

Is there any solutions for this problem ?

Upvotes: 0

Views: 1617

Answers (2)

lrn
lrn

Reputation: 71613

How do you try to view the image?

A base-64 string is not a valid image format.

You can use Uri.dataFromBytes(bytes, mimeType: "image/jpg") to create a data: URI containing the image. That URI's payload will be base-64 encoded for you. If you use that URI as the src of your img element in a browser, it should be displayed as the image.

Upvotes: 4

chunhunghan
chunhunghan

Reputation: 54365

Print function will not print everything
If you need to copy this long string, you can set break point and view in Variables
You can see image below

enter image description here

Upvotes: 2

Related Questions