在相机应用程序中添加矩形覆盖并在颤动中裁剪肖像图像答案

【问题标题】：Add Rectangle overlay in a camera application and Crop the portrait image in flutter在相机应用程序中添加矩形覆盖并在颤动中裁剪肖像图像
【发布时间】：2020-10-20 18:45:40
【问题描述】：

在我的应用程序中，我必须捕获国民身份证（与信用卡大小相同）并且必须将图像传递到后端。我已尝试使用以下代码在相机应用程序中显示矩形叠加层：

    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;
  }

现在我可以显示叠加层（PFB 屏幕截图）。

然后我正在导航下一个屏幕...绕过图像路径

Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => CropImageScreen(imagePath: path),
        ),
      );

我正在尝试裁剪图像。但是图像的高度和宽度不正确。通常在纵向模式下，高度应该更大，宽度应该更小。

但是我得到了高度：720，宽度：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);

但我的问题是如何使用动态值来裁剪图像。我在上面输入的静态值可能适用于我的三星设备。但这些值不适用于其他设备。

还有其他好的解决方案来裁剪矩形叠加层中的图像吗？

注意：我使用了 'package:camera/camera.dart' 库。

【问题讨论】：

您有解决方案吗？您能否在此处更新解决方案，以便像我这样的其他人也可以获得帮助。
我也遇到了同样的问题，能否分享一下你的解决方案？

标签： flutter dart camera overlay crop

【解决方案1】：

如果您还没有使用任何插件进行裁剪，您可以使用image_cropper。有了这个，您可以使用任何preset crop aspect ratios 或创建自定义，并根据设备的屏幕尺寸设置maxWidth 和maxHeight。要获取设备的高度和宽度，您可以使用 LayoutBuilder

LayoutBuilder(builder: (context, constraints) {
  debugPrint('Max height: ${constraints.maxHeight}, max width: ${constraints.maxWidth}');
  return Widget(); 
}),

...或媒体查询。

@override
Widget build(BuildContext context) {
  var screenSize = MediaQuery.of(context).size ;
  debugPrint(`Height: ${screenSize.height}, Width: ${screenSize.width}`);
}

【讨论】：