How do I get the RGB values from an image in Flutter? - flutter

Question

I'm creating a mobile client for my object-detection server. I already have a perfectly-working python client which takes an image as input, sends it to the server in an HTTP request and receives prediction as a json response. I'm trying to achieve the same in Dart which I'm fairly new to.
The python code I have converts the input JPG image into a numpy array of RGB values in the following format (using a 5x4 image as an example)-
[
[[182, 171, 153], [203, 188, 169], [242, 214, 200], [255, 235, 219], [155, 111, 98]],
[[181, 171, 146], [204, 190, 164], [255, 237, 214], [177, 142, 120], [84, 42, 20]],
[[176, 168, 129], [218, 206, 166], [180, 156, 118], [91, 59, 21], [103, 64, 25]],
[[186, 180, 132], [166, 156, 107], [91, 68, 24], [94, 63, 17], [122, 84, 39]]
]
In my dart code, I have attempted to convert the image into a list of 8-bit unsigned integers using-
Uint8List inputImg = (await rootBundle.load("assets/test.jpg")).buffer.asUint8List()
It gives me a long array of over 800 ints for the same 5x4 image.
On testing it with two single-pixel images (one black and one white), a large section of the Uint8List seems to be repeating for each. I isolated the differing sections of the array and they do not correspond with the RGB values expected for the colors (I expected [0 0 0] and [255 255 255], but got something like 255, 0, 63, 250, 0, 255, 0 and 254, 254, 40, 3 for the two respectively)
I just need the RGB values in the image. Would appreciate someone pointing me in the right direction!

Answer 1

Images are normally compressed when they're stored. Based on the file extension, I'm guessing you're using JPEG encoding. This means the data stored in the assets/test.jpg file is not an array of colors. That would be an inefficient use of data storage if everything were done that way. To get that array of colors, you need to decode the image. This can be done with the image package.
To do this, first add the package as a dependency by adding the following to the pubspec.yaml:
dependencies:
image: ^3.0.4
You should follow the same method of obtaining the encoded image data. But you then need to decode it.
final Uint8List inputImg = (await rootBundle.load("assets/test.jpg")).buffer.asUint8List();
final decoder = JpegDecoder();
final decodedImg = decoder.decodeImage(inputImg);
final decodedBytes = decodedImg.getBytes(format: Format.rgb);
decodedBytes contains a single depth list of all your pixel values in RGB format. To get it into your desired format, just loop over the values and add them to a new list.
List<List<List<int>> imgArr = [];
for(int y = 0; y < decodedImage.height; y++) {
imgArr.add([]);
for(int x = 0; x < decodedImage.width; x++) {
int red = decodedBytes[y*decodedImage.width*3 + x*3];
int green = decodedBytes[y*decodedImage.width*3 + x*3 + 1];
int blue = decodedBytes[y*decodedImage.width*3 + x*3 + 2];
imgArr[y].add([red, green, blue]);
}
}

Answer 2

To do this, first add the package as a dependency by adding the following to the pubspec.yaml:
image: ^3.2.0
import image library to your file:
import 'package:image/image.dart' as im;
get brightness of image:
int getBrightness(File file) {
im.Image? image = im.decodeImage(file.readAsBytesSync());
final data = image?.getBytes();
var color= 0;
for (var x = 0; x < data!.length; x += 4) {
final int r = data[x];
final int g = data[x + 1];
final int b = data[x + 2];
final int avg = ((r + g + b) / 3).floor();
color += avg;
}
return (color/ (image!.width * image.height)).floor();
}
Check selected image is dark or light:
bool isImageDark(int brightness) {
return brightness <= 127;
}
Use above method like this:
int brightness = getBrightness(file);
bool isDark= isImageDark(brightness);
Now you can change your icon color based on your background image