How to square crop a cameraImage in Flutter - flutter

Question

I'm creating a scanner and I needed to implement a square overlay to the Camera preview, I take the image stream from the Camera Preview and send it to an API, now after adding the square overlay I need to square crop the cameraImage taken from the Camera preview before sending it to the API.
I only have the cameraImage -which is YUV 420 format- taken how can I crop it programmatically?

Answer 1

I guess that for the full image you coded something like that:
Uint8List getBytes() {
final WriteBuffer allBytes = WriteBuffer();
for (final Plane plane in cameraImage.planes) {
allBytes.putUint8List(plane.bytes);
}
return allBytes.done().buffer.asUint8List();
}
In fact, you are concatenating one after the other the data of the 3 planes of YUV: all Y, then all U, then all V.
As you can see in the wikipedia page plane Y has the same width and height as the image, while planes U and V use width/2 and height/2.
If we go byte after byte that means that the code above is similar to the following code:
int divider = 1; // for first plane: Y
for (final Plane plane in cameraImage.planes) {
for (int i = 0; i < cameraImage.height ~/ divider; i++) {
for (int j = 0; j < cameraImage.width ~/ divider; j++) {
allBytes.putUint8(plane.bytes[j + i * cameraImage.width ~/ divider]);
}
}
divider = 2; // for planes U and V
}
Now that you're here, I think you understand how to crop:
int divider = 1; // for first plane: Y
for (final Plane plane in cameraImage.planes) {
for (int i = cropTop ~/ divider; i < cropBottom ~/ divider; i++) {
for (int j = cropLeft ~/ divider; j < cropRight ~/ divider; j++) {
allBytes.putUint8(plane.bytes[j + i * cameraImage.width ~/ divider]);
}
}
divider = 2; // for planes U and V
}
where the crop* variables are computed from the full image.
That's the theory: this piece of code does not take into consideration the camera orientation, the possible side-effects with odd sizes and the performances. But that's the general idea.