In my application, I have to capture National Id(same size as a credit card) and have to pass the image to the backend. I have tried the below code to display a rectangle overlay in a camera application:
return Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
CustomPaint(
foregroundPainter: Paint(),
child: CameraPreview(controller),
),
ClipPath(
clipper: Clip(),
child: CameraPreview(controller)),
],
),
);
}
class Paint extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
canvas.drawColor(Colors.grey.withOpacity(0.8), BlendMode.dstOut);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
class Clip extends CustomClipper<Path>{
@override
getClip(Size size) {
print(size);
Path path = Path()
..addRRect(RRect.fromRectAndRadius(Rect.fromLTWH(10, size.height/2-120, size.width-20, 260), Radius.circular(26)));
return path;
}
@override
bool shouldReclip(oldClipper) {
// TODO: implement shouldReclip
return true;
}
Now I am able to display the overlay(PFB screenshot).
Then I am navigating the next screen... bypassing the image path
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CropImageScreen(imagePath: path),
),
);
Here I am trying to crop the image. But the image height and widths are not correct. Normally in portrait mode height should be more and width should be less.
But I am getting height: 720, width: 1280.
ImageProperties properties =
await FlutterNativeImage.getImageProperties(imagePath);
final height = properties.height;
final width = properties.width;
print("1. height is: $height");
print("2. Width is: $width");
// I have used some static values to crop the image
File croppedFile = await FlutterNativeImage.cropImage(
imagePath, 250, 40, properties.width - 500, 640);
final originalFile = croppedFile;
List<int> imageBytes = await originalFile.readAsBytes();
final originalImage = img.decodeImage(imageBytes);
But my question here is how to use dynamic values to crop the image. The static values I entered above may work for my Samsung device. But these values will not work for other devices.
Any other good solution to crop the image which is there in Rectangle overlay?
Note: I have used 'package:camera/camera.dart' library.