Convert Image from Buffer to display in Frontend (Flutter)

Question

I have a backend based on NodeJS and using mongodb as the database. Images with the field name photo is saved as object Type Buffer. I have successfully sent Images from the app using form data but I am not able to display the image in frontend.

This is the function used to get the data from API

Future<User> userWithId() async {
  User result;
   try {
      final response = await http.get(
        'api link',
        headers: <String, String>{
          'Authorization': 'Bearer $token',
        },
      );
      if (response.statusCode == 200) {
        result = User.fromJson(jsonDecode(response.body));
      }
   } catch (e) {
      print(e.toString());
   }
  return result;
}

This is the fromJson function of the class User. The photo field here returns the image as buffer.

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    id: json['_id'] as String ?? "",
    email: json['email'] as String ?? "",
    // profilePhoto: json["photo"] ?? null,
    // profilePhoto: base64.encode(jsonDecode(json["photo"])) ?? null,
  );
}

This is the data from the photo field

This is the data from MongoDB database

Answer 1

For those who are facing this issue as well, this is a multi-part problem:

1. Converting List to List.
2. Using converted List to read/display image.

In OP's case, to get buffer List would be profilePhoto: json["photo"]["data"]["data"].

For step 1, To convert List to List:

List<dynamic> bufferDynamic = profilePhoto: json["photo"]["data"]["data"];
List<int> bufferInt = buffer.map((e) => e as int).toList();

For step 2 as some have already mention, use Image.memory class provided by Flutter.

Image.memory(Uint8List.fromList(bufferInt))

Hope this helps for those who need to read/display image from buffer. (:

Answer 2

you can use base64Decode method from dart:convert

store your image binary in string format:

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    ...
    profilePhoto: json["photo"] ?? null,
    ...
  );
}

and use the following code in UI:

Image.memory(base64Decode(user.profilePhoto))

also, don't forget to add an if statement to check if the photo is null or not

Hope, it helps

Answer 3

json['photo']['data']['data']; By doing this you are getting this error List' is not a subtype of type 'String'. So may be your return type for profilePhoto is String. Change it to dynamic then try again.

Answer 4

Thanks to the great article bellow explaining about bytes in dart, you can convert your response data which is as List of integers, to Uint8List data type and pass it to Image.memory to render image.

Image.memory(Uint8List.fromList(// pass image data array here));

https://medium.com/flutter-community/working-with-bytes-in-dart-6ece83455721

Answer 5

Try like this

List<int> imageData = user.profilePhoto['data'] as List<int>
////
Image.memory(Uint8List.fromList(imageData));

Answer 6

Image type

You should modify your class User, currently you have something like:

class User {
  final String id;
  final String email;
  final ? profilePhoto
}

I am not sure which type you are currently using but you need to change it accordingly to the data you get in your response. Your image is, in your computer, a list of bytes (uint8, meaning unsigned integer of 8 bits, so 1 byte), ranging from 0 to 255 in value (0 to 0xFF).

---

Images header

You can read about EXIF to understand better how the standard specifies the formats for images

Every JPEG file starts from binary value '0xFFD8', ends by binary value '0xFFD9'.

The first eight bytes of a PNG file always contain the following (decimal) values: 137 80 78 71 13 10 26 10

---

Fix

Change the type of your profilePhoto to Uint8List, full code:

class User {
  final String id;
  final String email;
  String profilePhoto // I don't know which type you use

  User({this.id, this.email, this.profilePhoto});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['_id'] as String ?? "",
      email: json['email'] as String ?? "",
      profilePhoto: json["photo"] ?? null,
    );
  }
}

And then load the image in your widget with Image.memory while being cautious as its value could be null:

return user.profilePhoto != null ? Image.memory(user.profilePhoto) : Container();

NB: Image.memory is a shorthand of an Image widget backed by MemoryImage.