How to get ui.Image(dart:ui) from network image?

Question

I am trying to write an image to canvas using Picture recorder...

drawImage requires dart:ui image

I have successfully imported asset image but getting following error for network image:

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.

[VERBOSE-2:shell.cc(186)] Dart Error: Unhandled exception: Exception: operation failed 0 _rootHandleUncaughtError. (dart:async/zone.dart:1112:29) 1 _microtaskLoop (dart:async/schedule_microtask.dart:41:21) 2 _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)

code tried so far..

netImage.obtainKey(new ImageConfiguration()).then((val) {
  var load = netImage.load(val);

  load.addListener((listener, err) async {
    ImageInfo imageInfo;
    setState(() => imageInfo = listener);

    imageInfo.image.toByteData().then((ss) {

      Uint8List lst = new Uint8List.view(ss.buffer);

      ui.instantiateImageCodec(lst).then((val) {
        val.getNextFrame().then((vaal) {
          imagetoDraw = vaal.image;
        });
      });
    });
  });
});

solution https://github.com/flutter/flutter/issues/23761 – UpaJah Feb 02 '19 at 16:25 — UpaJah, Feb 02 '19 at 16:25

score 14 · Answer 1 · edited Jan 07 '22 at 02:34

14

I faced the same problem. I resolved it by the snippet code as below:

Future<ui.Image> getImage(String path) async {
  var completer = Completer<ImageInfo>();
  var img = new NetworkImage(path);
  img.resolve(const ImageConfiguration()).addListener(ImageStreamListener((info, _) {
    completer.complete(info);
  }));
  ImageInfo imageInfo = await completer.future;
  return imageInfo.image;
}

edited Jan 07 '22 at 02:34

Ahmed Ashour

5,179
10
35
56

answered Oct 07 '19 at 07:13

Mr Special

1,576
1
20
33

score 0 · Answer 2 · answered Feb 02 '19 at 16:26

from https://github.com/flutter/flutter/issues/23761

    netImage.obtainKey(new ImageConfiguration()).then((val) {
      var load = netImage.load(val);

      load.addListener((listener, err) async {

        setState(() => imageInfo = listener);

//        imageInfo.image.toByteData().then((ss) {
//
//          Uint8List lst = new Uint8List.view(ss.buffer);
//
////          ui.instantiateImageCodec(lst).then((val) {
////            val.getNextFrame().then((vaal) {
////              imagetoDraw = vaal.image;
////            });
////          });
//        });
      });
    });

and then..

c.drawImage(imageInfo.image, offset3, paint);

I'm trying to implement your solution but what ever I try I get `The argument type 'Future Function(dynamic, dynamic)' can't be assigned to the parameter type 'ImageStreamListener'` error at `load.addListener`. Maybe you have any idea why it is happening? — Mārtiņš Ciekurs, Aug 01 '19 at 13:00

How to get ui.Image(dart:ui) from network image?

2 Answers2