How to convert a matrix of 64 bit values response to image in Dart

Question

I have a 'get' rest response as the picture, it returns in 64-bits value array. How can I convert these data to an image in Flutter?

The content-type is ‘application/octet-stream’ and 64 bits has to be converted to 8 bits to display the grayscale image.

I have tried base64.decode(response) but it throws me FormatException (FormatException: Invalid base64 data (at character 2)

[Postman response for 'get' request]: [1]: https://i.stack.imgur.com/FoxKR.png

Thank you

[Edit]: This is the request I make:

      final response = await dio.get(
        Consts.baseUrl + endPointUrl,
        queryParameters: {
          '_id': '5f6c5a7e8934b52296b957c5',
          'type': 'contamination'
        },
        options: Options(
            headers: {'Authorization': Consts.apiKey},
            contentType: 'application/octet-stream'),
      );

Please provide the screenshot of raw data, not pretty, as it does not have any data, Or else you can provide url & input. Need to know about input data to parse. — Mohamed Al Ameen, Nov 01 '20 at 07:43
@MohamedAlAmeen I edit the picture to have raw data. The input is a get HTTP request and it returns a matrix of 64 bit values — Hưng Nguyễn Trần Gia, Nov 01 '20 at 08:26
Don't know why you said "it does not have any data". Because I can see the response returns a data string with very weird characters. When I printed it out it has a length of 34455 characters — Hưng Nguyễn Trần Gia, Nov 01 '20 at 08:35

bluenile · Answer 1 · 2020-11-01T07:56:30.160

1

Are you getting the image file with extension (.jpg / .png) in url.
Did you try saving your 64bit data as follows (use .png or .jpg as case may be).

Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;
File file = new File('$tempPath/image.png');
await file.writeAsBytes(image64BitData);
// Display your image => file

edited Nov 01 '20 at 07:56

answered Nov 01 '20 at 07:50

bluenile

5,673
3
16
29

1. The url is like this "https://xxx.azurewebsites.net/api/room/heatmap?_id=5f6c5a7e8934b52296b957c5&type=contamination", and it doesn't have any extension 2. The response returns a string of data as I show above, so I don't know how to convert it to List to input in file.writeAsBytes() function. – Hưng Nguyễn Trần Gia Nov 01 '20 at 08:28
Possibly since the url has no .jpg or .png extension the response is being received as application/octet-stream. Try setting the header Content-type : image/jpeg – bluenile Nov 01 '20 at 08:33
Oh, I have mentioned above about the content-type is ‘application/octet-stream’. Because in the API doc I am working on it says it has to use that specific type to fetch the data. Let me try to change the type – Hưng Nguyễn Trần Gia Nov 01 '20 at 08:39
No, it does not work for me. I suppose we have to convert these data into Array then scale it back to Array then apply color look up table to grayscale image – Hưng Nguyễn Trần Gia Nov 01 '20 at 08:47
Oh, I have figured out what is the problem. In web rest API, I can fetch the data by using response.arrayBuffer() - see this link: https://stackoverflow.com/questions/53857416/weird-characters-in-image-response-of-post-request. So my question now is do we have any solution to use ArrayBuffer for API response in Flutter like web ? – Hưng Nguyễn Trần Gia Nov 04 '20 at 21:31

How to convert a matrix of 64 bit values response to image in Dart

1 Answers1