第二百九十三回

文章目录

• 1. 概念介绍
• 2. 方法与细节
• • 2.1 实现方法
  • 2.2 具体细节
  • 3. 示例代码
  • 4. 内容总结

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

    1. 概念介绍

    我们在前面章回中介绍的选择图片或者视频文件的方式都是通过文件窗口进行的，本章回中将介绍如何通过相机获取图片文件，也就是说我们不再选择已经已经拍好的图片，

    而是在选择图片时直接使用相机拍一张新图片。

    2. 方法与细节

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

    2.1 实现方法

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

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

      2.2 具体细节

      上面的步骤中使用了ImagePicker的pickImage()方法，该方法返回的是Future类型的对象，因此我们需要通过Future的then方法来获取文件路径。

      此外，该方法需要异步运行，因为获取文件路径是比较耗时的操作。方法中的source参数用来控制图片源，包中一共支持两种图片源：gallery和camera。它们分别表

      示通过相册和相机来获取图片。该方法还有一个命名参数：CameraDevice，该参数用来控制拍照时使用前置相机还是后置相机。

      3. 示例代码

      ImagePicker imagePicker = ImagePicker();
      XFile? _mediaFile;
      double imgWidth = 200;
      double imgHeight = 400;
      ///注意获取图片需要异步操作
      Future getImageFileByCamera() async {
        var imgFile = await imagePicker.pickImage(
          source: ImageSource.camera,
          maxWidth: imgWidth,
          maxHeight: imgHeight,
          imageQuality: 10,
        );
        return imgFile;
      }
      ///通过按钮来发出指令
      ElevatedButton(
        onPressed: () {
          getImageFileByCamera().then((value) {
            ///因为是异步，所以需要通过setState更新数据源
            setState(() {
              ///返回的路径是app下的缓冲目录：data/user/0/packagename/cache/scaled_1000000010.jpg
              // debugPrint("path: v${value[0].path}");
              _mediaFile = value;
            });
          });
        },
        child: const Text("Load Image"),
      ),
      ///显示图片文件
      _mediaFile == null
          ? const Icon(Icons.image)
          : (_mediaFile!.path.isEmpty
              ? const Text("do not select image")
              : Image.file(
                  File(_mediaFile!.path),
                  width: imgWidth,
                  height: imgHeight,
                  errorBuilder: (context, error, trace) {
                    return Text("load image error: $error");
                  },
                ))
      

      上面的示例代码中演示了如何通过相机获取图片文件，代码把pickImage()方法封装成了异步方法，并且将它绑定到按钮上，这样就可以在点击按钮时发出获取文件的指

      令，此时会打开相机，我们可以使用相机拍照，拍照完后有确认和放弃所拍图片的图标：对号和和错号。这种操作以可视化操作的方式选择图片文件，十分方便。代码中加

      载图片前需要检查文件路径，文件路径在程序最开始运行时为null,在程序运行后，但是没有选择任何图片文件时的文件路径不为空，而是为empty，这点需要特别注意，

      不然无法正确显示图片文件。此外，我们获取到的图片文件路径是一个相对路径，它并不是图片文件的绝对路径。

      4. 内容总结

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

      • Flutter官方提供了image_picker包，该包以可视化操作的方式获取文件路径；
      • 使用包中的pickImage()方法可以通过相机拍照来获取图片文件的相对路径；
      • 包中的pickImage()方法提供了相关的参数来设置图片来源和前后相机；
      • 加载图片文件前需要检查文件路径的可靠性，不然可能导致Image组件无法加载图片文件；

        看官们，与"如何通过相机获取图片文件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!