Convert a UInt8List to Image in flutter/dart-ui

Question

I have this scenario where I have to get a UInt8List from an image like that:

List stuff = image.toByteData().buffer.asUInt8List()

Do some manipulations and get back to a Image.

I've tried the following:

List stuff = image.toByteData().buffer.asUInt8List()
ui.decodeImageFromList(stuff, (image){
  // do stuff with image
});

But I keep getting this Exception:

E/flutter (10201): [ERROR:flutter/lib/ui/painting/codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
E/flutter (10201): [ERROR:flutter/shell/common/shell.cc(186)] Dart Error: Unhandled exception:
...

Take notice that even without any changes in the List the exception is thrown. How can I make the list have a encodable format?

score 48 · Answer 1 · answered Aug 08 '20 at 19:07

48

You can use memory image as given below, for the direct byte rendering

child: Image.memory(Uint8List bytes);

answered Aug 08 '20 at 19:07

Kishan Donga

2,851
2
23
35

This doesn't work with Uint8List that are generated from a `ui.Image` instance – Renan C. Araujo Jul 01 '21 at 15:55

score 8 · Answer 2 · answered May 02 '20 at 10:45

8

You can use MemoryImage class to convert a Uint8List to image.

var _image = MemoryImage(image);

You can find more details about this class here

answered May 02 '20 at 10:45

Firosh Vasudevan

671
10
11

score 5 · Accepted Answer · answered Jan 03 '19 at 22:42

ui.Image can turn itself into an RGBA bitmap (or PNG), but cannot convert itself back from a bitmap. (The reason for this is that there isn't any way to tell the image codec things like the color depth, geometry, etc.) The solution is to add a BMP file header onto the front of your bitmap, where you can describe those missing things, then pass that to instantiateImageCodec. See this answer, but note that in that case the bitmap in question had a strange packed color map. In your case of 32 bit RGBA, the header would be even simpler.

After this answer, I started to work on something to make this easier. I'm converting Uint8List into Image with Bitmap, a package I've made. Thanks. https://github.com/renancaraujo/bitmap/ — Renan C. Araujo, Sep 03 '19 at 19:09

score 5 · Answer 4 · edited Jun 21 '23 at 01:36

5

use this.

static Future<ui.Image> bytesToImage(Uint8List imgBytes) async{
    ui.Codec codec = await ui.instantiateImageCodec(imgBytes);
    ui.FrameInfo frame;
    try {
      frame = await codec.getNextFrame();
    } finally {
      codec.dispose();
    }
    return frame.image;
  }

edited Jun 21 '23 at 01:36

Luke Hutchison

8,186
2
45
40

answered Nov 19 '20 at 06:36

Ali Bagheri

3,068
27
28

3

need to be import `import 'dart:ui' as ui;` – Tushar Nikam Oct 26 '21 at 10:24
You need to call `codec.dispose()` before `return`. – Luke Hutchison Jun 21 '23 at 01:33

score 1 · Answer 5 · answered Jun 21 '21 at 10:17

Here is a tested code for you.

    final directory = await getApplicationDocumentsDirectory();
    final pathOfImage = await File('${directory.path}/legendary.png').create();
    final Uint8List bytes = stuff.buffer.asUint8List();
    await pathOfImage.writeAsBytes(bytes);

final Uint8List bytes = stuff.buffer.asUint8List();

Here, stuff refers to the Uint8List that should be converted to an image.

score 1 · Answer 6 · answered Dec 27 '21 at 10:40

this method worked for me, got the reference from another answer to a similar kind of problem at stackoverflow here

Future<ui.Image> loadImage(Uint8List img) async {
    final Completer<ui.Image> completer = Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      return completer.complete(img);
    });
    return completer.future;
  }

Convert a UInt8List to Image in flutter/dart-ui

6 Answers6

Linked