通过相机来获取图片

文章目录

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

我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容,本章回中将介绍如何通过相机获取图片文件.闲话休提,让我们一起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. 示例代码

dart 复制代码
ImagePicker imagePicker = ImagePicker();

XFile? _mediaFile;

double imgWidth = 200;
double imgHeight = 400;

///注意获取图片需要异步操作
Future<XFile?> 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组件无法加载图片文件;
    看官们,与"如何通过相机获取图片文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
LabVIEW开发5 小时前
LabVIEW双目测距
数码相机·计算机视觉·labview·labview知识·labview功能·labview程序
双翌视觉1 天前
机器视觉的汽车中控屏FPC模切应用
数码相机·汽车
Chicheng_MA1 天前
算能 CV184 智能相机整体方案介绍
人工智能·数码相机·算能
Antonio9152 天前
【图像处理】rgb和srgb
图像处理·人工智能·数码相机
格林威2 天前
UV紫外相机的简单介绍和场景应用
人工智能·数码相机·计算机视觉·视觉检测·制造·uv·工业相机
Matlab仿真实验室2 天前
基于Matlab实现双目图计算深度图
开发语言·数码相机·matlab·双目图计算深度图
列兵阿甘2 天前
知微传感Dkam系列3D相机SDK例程篇:Python设置相机触发模式
python·数码相机·3d
格林威2 天前
短波红外相机的简单介绍和场景应用
人工智能·数码相机·计算机视觉·目标跟踪·视觉检测·工业相机·工业镜头
格林威2 天前
可见光工业相机半导体制造领域中的应用
图像处理·人工智能·数码相机·计算机视觉·视觉检测·制造·工业相机
weixin_635234823 天前
帧采集器连接相机,Halcon连接相机
数码相机