通过相机来获取图片

devtools/2024/11/15 7:02:57/

文章目录

  • 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<XFile?>类型的对象,因此我们需要通过Future的then方法来获取文件路径。
此外,该方法需要异步运行,因为获取文件路径是比较耗时的操作。方法中的source参数用来控制图片源,包中一共支持两种图片源:gallery和camera。它们分别表
示通过相册和相机来获取图片。该方法还有一个命名参数:CameraDevice,该参数用来控制拍照时使用前置相机还是后置相机。

3. 示例代码

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组件无法加载图片文件;
    看官们,与"如何通过相机获取图片文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

http://www.ppmy.cn/devtools/96366.html

相关文章

EmguCV学习笔记 VB.Net 2.4 Image类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV学习笔记目录 Vb.net EmguCV学习笔记目录 C# 笔者的博客网址&#xff1a;VB.Net-CSDN博客 教程相关说明以及如何获得pdf教…

Windows采用VS2019实现Open3D的C++应用

1、参考链接 https://blog.csdn.net/qq_31254435/article/details/137799739 但是&#xff0c;我的方法和上述链接不大一样&#xff0c;我是采用VS2019进行编译的&#xff0c;方便在Windows平台上验证各种算法。 2、创建一个VS2019的C Console工程 #include <iostream>…

GEE训练:sentinel-1数据的投影、显示和导出

函数 projection() Returns the default projection of an Image. Throws an error if the bands of the image dont all have the same projection. 返回图像的默认投影。如果图像带的投影不一致,则会抛出错误。 Arguments: this:image (Image): The image from which …

Django 中显示图片

在 Django 中显示图片的基本步骤包括&#xff1a;配置静态文件和媒体文件的处理、上传图片、以及在模板中显示图片。以下是详细步骤&#xff1a; 问题背景&#xff1a; 我在学习 Django 并在构建一个简单的网站&#xff0c;我尝试使用模板语言添加一些图片&#xff0c;但显示的…

LeetCode.22。括号生成

题目描述&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组 输入输出实例&#xff1a; 思路&#xff1a;对于这道题目我们可以用回溯法&#xff0c;创建一个函数backtrack(当前字符&#xff0c;左括…

Java链表LinkedList的基本概念、操作以及使用示例

在 Java 中&#xff0c;链表是一种常见的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据元素和指向下一个节点的引用。Java 提供了一些内置的链表实现&#xff0c;最常用的是 java.util.LinkedList 类。下面将详细介绍链表的基本概念、操作以及使用示…

已解决:java.net.BindException: 地址已在使用

1. 问题描述 java.net.BindException: 地址已在使用 是一种常见的网络异常&#xff0c;通常在服务器程序尝试绑定到一个已经被占用的端口或地址时出现。具体的异常信息可能如下&#xff1a; java.net.BindException: Address already in use: JVM_Bind或 java.net.BindExcep…

CSS3模拟windows加载效果

CSS3模拟windows加载效果https://www.bootstrapmb.com/item/15086 CSS3模拟Windows加载效果通常通过动画&#xff08;animations&#xff09;和变换&#xff08;transforms&#xff09;来实现。以下是一些实现这一效果的方法&#xff0c;这些方法主要利用了CSS3的动画和变换功…