全球网站域名苏周到app开发公司

flutter开发实战-自定义相机camera功能。

Flutter 本质上只是一个 UI 框架，运行在宿主平台之上，Flutter 本身是无法提供一些系统能力，比如使用蓝牙、相机、GPS等，因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。
实现相机功能，我们使用的是camera插件。

一、引入camera插件

在pubspec.yaml引入插件

  # Camera相机拍照等camera: ^0.10.5+2image: ^4.0.17

二、实现相机拍照功能

在iOS的info.plist文件增加相机、麦克风权限

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

在Android的android/app/build.gradle调整

minSdkVersion 21

处理详情权限获取，以下是权限错误的类型

• CameraAccessDenied：当用户拒绝相机访问权限时抛出。
• CameraAccessDeniedWithoutPrompt：仅限iOS。当用户先前拒绝该权限时抛出。iOS不允许再次提示警报对话框。用户必须进入“设置”>“隐私”>“相机”才能访问相机。
• CameraAccessRestricted:仅限iOS。当摄像头访问受到限制且用户无法授予权限（家长控制）时抛出。
• AudioAccessDenied：当用户拒绝音频访问权限时抛出。
• AudioAccessDeniedWithoutPrompt：目前仅限iOS。当用户先前拒绝该权限时抛出。iOS不允许再次提示警报对话框。用户必须转到“设置”>“隐私”>“麦克风”才能启用音频访问。
• AudioAccessRestricted：目前仅限iOS。当音频访问受到限制并且用户无法授予权限（家长控制）时抛出。

2.1 实现相机

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';late List<CameraDescription> _cameras;Future<void> main() async {WidgetsFlutterBinding.ensureInitialized();_cameras = await availableCameras();runApp(const CameraApp());
}/// CameraApp is the Main Application.
class CameraApp extends StatefulWidget {/// Default Constructorconst CameraApp({super.key});@overrideState<CameraApp> createState() => _CameraAppState();
}class _CameraAppState extends State<CameraApp> {late CameraController controller;@overridevoid initState() {super.initState();controller = CameraController(_cameras[0], ResolutionPreset.max);controller.initialize().then((_) {if (!mounted) {return;}setState(() {});}).catchError((Object e) {if (e is CameraException) {switch (e.code) {case 'CameraAccessDenied':// Handle access errors here.break;default:// Handle other errors here.break;}}});}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {if (!controller.value.isInitialized) {return Container();}return MaterialApp(home: CameraPreview(controller),);}
}

2.2 生命周期更改时处理相机

通过重写didChangeAppLifecycleState方法来处理生命周期更改，如下所示：

使用WidgetsBindingObserver

@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {final CameraController? cameraController = controller;// App state changed before we got the chance to initialize.if (cameraController == null || !cameraController.value.isInitialized) {return;}if (state == AppLifecycleState.inactive) {cameraController.dispose();} else if (state == AppLifecycleState.resumed) {_initializeCameraController(cameraController.description);}}

2.3 CameraPreview预览时图像变形问题更改

这个需要使用到具体Container的宽高和aspectRatio做处理

    if (controller != null && controller!.value.isInitialized) {// 设备像素比double deviceRatio = 1.0;if (widget.width! > widget.height!) {deviceRatio = widget.width! / widget.height!;} else {deviceRatio = widget.height! / widget.width!;}// 相机纵横比final double aspectRatio = controller!.value.aspectRatio;double scale = aspectRatio / deviceRatio;return Container(key: _cameraContainerGlobalKey,width: widget.width,height: widget.height,clipBehavior: Clip.hardEdge,decoration: BoxDecoration(color: Colors.transparent,borderRadius: BorderRadius.circular(20.r),),child: Stack(alignment: Alignment.center,clipBehavior: Clip.hardEdge,children: [Container(width: widget.width,height: widget.height,clipBehavior: Clip.hardEdge,decoration: BoxDecoration(color: Colors.transparent,),child: RepaintBoundary(key: _cameraViewGlobalKey,child: Transform.scale(scale: scale * aspectRatio,child: AspectRatio(aspectRatio: aspectRatio,child: Center(child: CameraPreview(controller!,),),),),),),),);
}

2.4 实现拍照功能

使用拍照功能，需要用到CameraController

Future<XFile?> takePicture() async {final CameraController? cameraController = controller;if (cameraController == null || !cameraController.value.isInitialized) {print('Error: select a camera first.');return null;}if (cameraController.value.isTakingPicture) {// A capture is already pending, do nothing.return null;}try {final XFile file = await cameraController.takePicture();print("takePicture file:${file.toString()}");return file;} on CameraException catch (e) {print("takePicture exception:${e.toString()}");return null;}}

获取到File，可以得到图片的path。

2.5 暂停及恢复预览

暂停及恢复预览

if (!cameraController.value.isPreviewPaused) {await cameraController.pausePreview();}

if (cameraController.value.isPreviewPaused) {await cameraController.resumePreview();}

2.6 获得图片后裁剪

裁剪图片这里使用的是插件：image

引入插件

image: ^4.0.17

实现裁剪

if (file != null) {// 保存到相册// await SaveToAlbumUtil.saveLocalImage(file.path);RenderBox renderBox = _cameraContainerGlobalKey.currentContext!.findRenderObject() as RenderBox;// offset.dx , offset.dy 就是控件的左上角坐标Offset offset = renderBox.localToGlobal(Offset.zero);//获取sizeSize size = renderBox.size;// 创建文件pathString imageDir = await PathUtil.createDirectory("local_images");String imagePath = '$imageDir/${TimeUtil.currentTimeMillis()}.png';// 获取当前设备的像素比double dpr = ui.window.devicePixelRatio;print("devicePixelRatio:${dpr}");print("offset:(${offset.dx},${offset.dy})--size:(${size.width},${size.height})");File? targetFile = await ImageUtil.cropImage(file.path, imagePath,x: (dpr * offset.dx).floor(),y: (dpr * offset.dy).floor(),width: (dpr * size.width).ceil(),height: (dpr * size.height).ceil());if (targetFile != null) {await SaveToAlbumUtil.saveLocalImage(targetFile.path);}
}

裁剪结果如图所示

三、小结

flutter开发实战-自定义相机camera功能，拍照及图片裁剪功能.

学习记录，每天不停进步。