通过相机来获取图片

我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容，本章回中将介绍如何通过相机获取图片文件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍的选择图片大概视频文件的方式都是通过文件窗口举行的，本章回中将介绍如何通过相机获取图片文件，也就是说我们不再选择已经已经拍好的图片，
而是在选择图片时直接使用相机拍一张新图片。
2. 方法与细节

通过相机获取图片也是通过image_picke包来实现，这个包虽然叫image_picker，但是它可以选择视频，而且可以调用相机去照相和录像。
2.1 实现方法

该包提供了pickImage()方法来从相机获取图片文件，接下来我们介绍详细的实现方法。

• 创建文件选择器对象，也就是包中提供的ImagePicker类的实例；
  
• 使用文件选择器的pickImage()方法获取图片文件，通过该方法的参数把图片源设置为相机；
  
• 该方法会启动相机来照相而且把照相后图片的存储路径返回给方法调用者；
  
• 获取到文件路径后就可以使用Image组件的file()方法加载图片文件。
  

2.2 具体细节

上面的步骤中使用了ImagePicker的pickImage()方法，该方法返回的是Future<XFile?>类型的对象，因此我们需要通过Future的then方法来获取文件路径。
此外，该方法需要异步运行，由于获取文件路径是比力耗时的操作。方法中的source参数用来控制图片源，包中一共支持两种图片源：gallery和camera。它们分别表
示通过相册和相机来获取图片。该方法另有一个命名参数：CameraDevice，该参数用来控制照相时使用前置相机还是后置相机。
3. 示例代码

1. ImagePicker imagePicker = ImagePicker();
3. XFile? _mediaFile;
5. double imgWidth = 200;
6. double imgHeight = 400;
8. ///注意获取图片需要异步操作
9. Future<XFile?> getImageFileByCamera() async {
10.   var imgFile = await imagePicker.pickImage(
11.     source: ImageSource.camera,
12.     maxWidth: imgWidth,
13.     maxHeight: imgHeight,
14.     imageQuality: 10,
15.   );
16.   return imgFile;
17. }
19. ///通过按钮来发出指令
20. ElevatedButton(
21.   onPressed: () {
22.     getImageFileByCamera().then((value) {
23.       ///因为是异步，所以需要通过setState更新数据源
24.       setState(() {
25.         ///返回的路径是app下的缓冲目录：data/user/0/packagename/cache/scaled_1000000010.jpg
26.         // debugPrint("path: v${value[0].path}");
27.         _mediaFile = value;
28.       });
29.     });
30.   },
31.   child: const Text("Load Image"),
32. ),
34. ///显示图片文件
35. _mediaFile == null
36.     ? const Icon(Icons.image)
37.     : (_mediaFile!.path.isEmpty
38.         ? const Text("do not select image")
39.         : Image.file(
40.             File(_mediaFile!.path),
41.             width: imgWidth,
42.             height: imgHeight,
43.             errorBuilder: (context, error, trace) {
44.               return Text("load image error: $error");
45.             },
46.           ))

复制代码

上面的示例代码中演示了如何通过相机获取图片文件，代码把pickImage()方法封装成了异步方法，而且将它绑定到按钮上，如许就可以在点击按钮时发出获取文件的指
令，此时会打开相机，我们可以使用相机照相，照相完后有确认和放弃所拍图片的图标：对号和和错号。这种操作以可视化操作的方式选择图片文件，十分方便。代码中加
载图片前需要检查文件路径，文件路径在程序最开始运行时为null,在程序运行后，但是没有选择任何图片文件时的文件路径不为空，而是为empty，这点需要特殊注意，
否则无法准确显示图片文件。此外，我们获取到的图片文件路径是一个相对路径，它并不是图片文件的绝对路径。
4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• Flutter官方提供了image_picker包，该包以可视化操作的方式获取文件路径；
  
• 使用包中的pickImage()方法可以通过相机照相来获取图片文件的相对路径；
  
• 包中的pickImage()方法提供了相关的参数来设置图片泉源和前后相机；
  
• 加载图片文件前需要检查文件路径的可靠性，否则可能导致Image组件无法加载图片文件；
  看官们，与"如何通过相机获取图片文件"相关的内容就介绍到这里，接待各人在批评区交换与讨论!
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。