flutter调用相机，实时监控相机中的实物并绘制边框，拍照之后

1. 添加依赖库

camera: ^0.9.4+5
image: ^2.1.19
path_provider: ^2.0.2

2. 检查摄像头权限

添加以下代码到main 方法中：

WidgetsFlutterBinding.ensureInitialized();
await Permission.camera.request();
await Permission.storage.request();

3. 创建相机页面

通过CameraController 和CameraPreview 组件创建相机页面。

class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;

@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CameraPreview(_controller);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}

4. 实时绘制边框

在CameraPreview 上添加CustomPaint 组件，并在CustomPainter 中绘制边框。

class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
Rect? _objectRect;

@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
_controller.startImageStream((image) {
processImage(image);
});
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

void processImage(CameraImage image) {
// TODO: 处理图像并更新 _objectRect
setState(() {});
}

@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Stack(
children: [
CameraPreview(_controller),
CustomPaint(
painter: ObjectPainter(
objectRect: _objectRect,
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}

class ObjectPainter extends CustomPainter {
final Rect? objectRect;

ObjectPainter({required this.objectRect});

@override
void paint(Canvas canvas, Size size) {
if (objectRect != null) {
Paint paint = Paint()
..color = Colors.red
..strokeWidth = 4;
canvas.drawRect(objectRect!, paint);
}
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}

5. 拍照并裁剪

在页面上添加FloatingActionButton 组件，并在回调函数中拍照并将图像保存到本地，然后跳转到裁剪页面。

class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
Rect? _objectRect;

@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
_controller.startImageStream((image) {
processImage(image);
});
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

void processImage(CameraImage image) {
// TODO: 处理图像并更新 _objectRect
setState(() {});
}

Future<String?> takePicture() async {
if (!_controller.value.isInitialized) {
return null;
}

final Directory directory = await getApplicationDocumentsDirectory();
final String filePath = '${directory.path}/picture.jpg';

await _controller.takePicture(filePath);

return filePath;

}

void navigateToCrop(String filePath) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CropPage(filePath: filePath),
),
);
}

@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Stack(
children: [
CameraPreview(_controller),
CustomPaint(
painter: ObjectPainter(
objectRect: _objectRect,
),
),
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
onPressed: () async {
String? filePath = await takePicture();
if (filePath != null) {
navigateToCrop(filePath);
}
},
child: Icon(Icons.camera),
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}

6. 裁剪图片

使用ImageCropper 组件进行图片裁剪。

class CropPage extends StatelessWidget {
final String filePath;

CropPage({required this.filePath});

Future<void> cropImage(BuildContext context) async {
File? croppedFile = await ImageCropper.cropImage(
cropStyle: CropStyle.rectangle,
sourcePath: filePath,
aspectRatioPresets: [CropAspectRatioPreset.square],
androidUiSettings: AndroidUiSettings(
toolbarTitle: '裁剪照片',
toolbarColor: Theme.of(context).primaryColor,
toolbarWidgetColor: Colors.white,
activeControlsWidgetColor: Theme.of(context).accentColor),
iosUiSettings: IOSUiSettings(
minimumAspectRatio: 1.0,
),
);

if (croppedFile != null) {
  // TODO: 处理裁剪后的图片
}

Navigator.pop(context);

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('裁剪照片'),
),
body: Center(
child: Image.file(File(filePath)),
),
floatingActionButton: FloatingActionButton(
onPressed: () => cropImage(context),
child: Icon(Icons.crop),
),
);
}
}

这样就完成了实时绘制边框、拍照及裁剪的功能。注意：上述代码中还需要添加一些流程的判断和错误处理。