Search code examples
flutterimagedartmobile-development

Converting grayscale 1D list of Image Pixels to Grayscale Image Dart


I am trying to convert a binary mask predicted with the pytorch_mobile package to an image I can show in my app.

The Prediction I receive is a 1-Dimensional list containing the predictions that my model spits out, these are negative for pixels assigned to the background and positive for pixels assigned to the area of interest. After this, I create a list that assigns the value 0 to all previously negative values, and 255 to all previously positive values yielding a 1-Dimensional list containing the values 0 or 255 depending on what the pixel was classified as.

The image prediction is a size of 512x512 pixels, and the length of the list is subsequently 262,144.

How would I be able to convert this list into an image that I could save to storage or show via the flutter UI?

Here is my current code:

    customModel = await PyTorchMobile
        .loadModel('assets/segmentation_model.pt');

    result_list = [];
    File image = File(filePath);

    List prediction = await customModel.getImagePredictionList(image, 512, 512);

    prediction.forEach((element) {
      if (element >0){
        result_list.add(255);
      }else if(element <= 0){
        result_list.add(0);
      }
    });

    result_list_Uint8 = Uint8List.fromList(result_list);

Solution

  • The following should do the trick. Just use Image.setPixelSafe to set every pixel in the image and then convert it to a Flutter Image widget with encodePng and Image.memory.

    import 'package:image/image.dart' as im;
    
    ...
    
    final img = im.Image(512, 512);
    for (var i = 0, len = 512; i < len; i++) {
      for (var j = 0, len = 512; j < len; j++) {
        final color = result_list_Uint8[i * 512 + j] == 0 ? 0 : 0xffffff;
        img.setPixelSafe(i, j, 0xff000000 | color);
      }
    }
    
    final pngBytes = Uint8List.fromList(im.encodePng(img));
    photoImage = Image.memory(pngBytes);