第三百九十二回

文章目录

  • 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.hqwc.cn/news/535747.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法设计】实验五分支限界法(附源代码)

这里写目录标题 一、上机目的二、上机内容与要求三、上机步骤四、上机结果1、将课本6.2节单源最短路径算法改为程序&#xff0c;并进行测试和验证2、将课本6.3节装载问题改为程序&#xff0c;并进行测试和验证。 一、上机目的 1、通过分支限界法的示例程序进一步理解分支限界法…

SAP 消息号AA377

客户在做资产报废的时候&#xff0c;出现以下报错 解决办法&#xff1a;OAAQ “历史数据传输状态”变成“已完成”就OK

揭秘数据之美:利用 Bokeh 轻松构建实时、动态的数据可视化项目

1、引言 想让你的数据跃然 “屏” 上&#xff1f;厌倦了静态图表的平淡无奇&#xff1f;那么&#xff0c;今天就让我们一起探索 Python 世界中的瑰宝 ——Bokeh 库。这款强大的可视化工具以其流畅的交互性和实时更新能力&#xff0c;让你的数据呈现如电影般生动立体&#xff0…

【记录 | 基础动态规划】:数字三角形

数字三角形 链接:[USACO1.5] [IOI1994]数字三角形 Number Triangles 题目描述 观察下面的数字金字塔。 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。 在上面的样例中,从 7 → 3 → 8 → 7 →…

一文掌握mysql中的查询语句

目录 1. 聚合查询1.1 聚合函数1.2 GROUP BY子句1.3 HAVING 2. 联合查询2.1 内连接2.2 外连接2.3 自连接2.4 子查询2.5 合并查询 1. 聚合查询 1.1 聚合函数 常见的统计总数、计算平局值等操作&#xff0c;可以使用聚合函数来实现&#xff0c;常见的聚合函数有&#xff1a; 函…

【知识库系统】使用SpringSecurity进行身份认证

一、理论知识部分 SpringSecurity 的官网文档地址&#xff1a;SpringSecurity 这里以24年3月份的 6.2.2 版本为例&#xff0c;记录一下学习过程。 1. SpringSecurity 是基于 Servlet Filters 的&#xff0c;而 Servlet Filters 中的流程如下&#xff1a;首先由客户端 Client…

11双体系Java学习之方法

方法简述 package method;public class Demo01 {//main 方法public static void main(String[] args) {//实际参数&#xff1a;实际调用传递给他的参数int sum add (1,2);System.out.println(sum);//test();}//加法//形式参数&#xff0c;用来定义作用的public static int add…

明明jar包存在却报错找不到包名?两招教你解决java: 程序包org.springframework.context.annotation不存在问题!

一、问题提出 IDEA项目有时因为依赖库的问题出现出错&#xff1a; java: 程序包org.springframework.context.annotation不存在&#xff0c;如下图。 二、解决办法 方案1&#xff1a; 重新导入项目 ① 将项目中 .idea .iml 全部删除&#xff0c;项目重新导入 ② 用idea重新…

外盘期货商品配资软件开发/如何接主账号接口

外盘期货商品配资软件接主账号接口的过程涉及多个步骤&#xff0c;以下是一般性的指导&#xff1a; 了解接口规范&#xff1a;首先&#xff0c;你需要了解主账号接口的具体规范&#xff0c;包括接口协议、数据格式、传输方式、认证机制等。这通常可以通过查阅相关的文档或向提…

Kubernetes activemq系列| k8s 部署activemq artemis 集群(可外部通信)

一、ActiveMQ Artemis介绍 Apache ActiveMQ Artemis 是一个高性能的开源消息代理&#xff0c;它完全符合 Java Message Service (JMS) 2.0 规范&#xff0c;并支持多种通信协议&#xff0c;包括 AMQP、MQTT、STOMP 和 OpenWire 等。ActiveMQ Artemis 由 Apache Software Found…

杂七杂八111

MQ 用处 一、异步。可提高性能和吞吐量 二、解耦 三、削峰 四、可靠。常用消息队列可以保证消息不丢失、不重复消费、消息顺序、消息幂等 选型 一Kafak:吞吐量最大&#xff0c;性能最好&#xff0c;集群高可用。缺点&#xff1a;会丢数据&#xff0c;功能较单一。 二Ra…

ChatGPT浪潮来袭!谁先掌握,谁将领先!

任正非在接受采访时说 今后职场上只有两种人&#xff0c; 一种是熟练使用AI的人&#xff0c; 另一种是创造AI工具的人。 虽然这个现实听起来有些夸张的残酷&#xff0c; 但这就是我们必须面对的事实 &#x1f4c6; 对于我们普通人来说&#xff0c;我们需要努力成为能够掌握…