Parse RosImage to Flutter

[abdelrahman-osama]

I would like to know if you have any idea how can I convert a RosImage to a flutter image object. Thank you :)

[TimWhiting]

Here is what we use at work:

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sensor_msgs/msgs.dart' as msgs;

extension UIImageToImageMessage on ui.Image {
  Future<msgs.Image> toRosMessage() async {
    try {
      final byteData = await toByteData();
      final bytes = byteData!.buffer.asUint8List();
      final image = msgs.Image(
        encoding: 'bgra8',
        height: height,
        width: width,
        is_bigendian: 0,
        step: width * 4,
        data: bytes.toBgra,
      );
      return image;
    } on Exception catch (_) {
      // print('Error converting from image $e');
      final image = msgs.Image(
        encoding: 'bgra8',
        height: 0,
        width: 0,
        is_bigendian: 0,
        step: 0,
        data: [],
      );
      return image;
    }
  }
}

extension ImageMessageToDartImage on msgs.Image {
  Future<ui.Image> toDartImage({int? targetWidth, int? targetHeight}) async {
    final image = Completer<ui.Image>();

    //TODO: Find more efficient way to do this
    final list = Uint8List(width * height * 4);
    for (var pixel = 0; pixel < data.length / 3; pixel++) {
      list[pixel * 4] = data[pixel * 3];
      list[pixel * 4 + 1] = data[pixel * 3 + 1];
      list[pixel * 4 + 2] = data[pixel * 3 + 2];
      list[pixel * 4 + 3] = 255;
    }

    ui.decodeImageFromPixels(
      list,
      width,
      height,
      ui.PixelFormat.bgra8888,
      image.complete,
      rowBytes: width * 4,
      targetHeight: targetHeight ?? height,
      targetWidth: targetWidth ?? width,
    );
    return image.future;
  }
}

There is probably a better way of doing this. It also depends on the encoding that you are using. Look into the documentation for these methods if you need other encodings.