首页 > 其他分享 >通过相机来获取图片

通过相机来获取图片

时间:2024-08-16 22:54:57浏览次数:9  
标签:文件 路径 相机 获取 方法 图片

文章目录


我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容,本章回中将介绍如何通过相机获取图片文件.闲话休提,让我们一起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组件无法加载图片文件;
    看官们,与"如何通过相机获取图片文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:文件,路径,相机,获取,方法,图片
From: https://blog.csdn.net/talk_8/article/details/141271109

相关文章

  • 《机器学习》KNN算法搭配OpenCV训练模型、识别图片 No.2
    一、使用KNN算法识别数字1、明确目的:        有一张图片,其中有一份数据,其中共有0-9的不同写法的数字,共5000条,现在想要对这张图片中的数据进行训练,以完成当输入一张图片,图片内为手写的数字,能自动识别其数字的值为多少,从而完成训练。2、获取数据首先看下面一张图:它......
  • 正确下载获取mathtype永久激活码密钥及序列号附2024最新下载安装教程
    嘿,亲爱的数学爱好者们!......
  • 混合选择图片和视频
    文章目录1.概念介绍2.方法与细节2.1实现方法2.2具体细节3.示例代码4.内容总结我们在上一章回中介绍了"如何混合选择图片和视频文件"相关的内容,本章回中将介绍如何混合选择多个图片和视频文件.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在上一章......
  • Axios请求使用params参数导致后端获取数据嵌套
    问题重述:首先看前端的axios请求这里我使用params参数将data数据传给后端letdata=JSON.stringify(this.posts);axios.post("/blog_war_exploded/insertPost",{params:{data:data......
  • 获取Windows个性化中自带的聚焦锁屏
    想要保存登录屏幕(锁屏界面)的背景图片,可以通过以下脚本一键获取:@echooffsetlocalenabledelayedexpansion::WindowsSpotlight锁屏图片资源地址set"sourcePath=%localappdata%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets"::......
  • linq快速动态获取数据库表字段名称、类型、数据
     varbj="Bj";             varpbj=typeof(Xs_xx).GetProperty(bj);//获得班级属性      /*      varcxbj=fromaainsjklj.Xs_xx            lety=(string)pbj.GetValue(aa,null)//linq......
  • Unity Editor 保存图片、缩放纹理
    usingSystem.IO;usingUnityEditor;usingUnityEngine;publicclassConvertIconToMultipleSizes:Editor{[MenuItem("Assets/ConvertIconToMultipleSizes",true)]privatestaticboolValidateSplitFbxAnimation(){if(Selection.......
  • 基于深度学习的图片风格转化
    基于深度学习的图片风格转化作者:禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming1.背景介绍1.1问题的由来图片风格转化是计算机视觉领域一个充满魅力且极具挑战性的课题。它旨在将一张普通照片转换成具有特定艺术风格的图像,如梵高风格、莫奈风格、......
  • 使用magicAPI对接python 文件,上传参数获取不到回参问题
    1、在python文件中,创建post请求 @app.route('/post_endpoint',methods=['POST'])defhandle_post_request():#从请求中获取JSON数据data=request.form#打印接收到的数据(可选,用于调试)print(data)returnjsonify(data),200 这个方法,是得到form-data返回的参......
  • LiveGBS流媒体平台GB/T28181功能-获取GB28181接入的海康大华宇视华为摄像头硬件NVR设
    @目录1、背景2、视频流媒体集成2.1、页面集成2.1、视频流地址播放集成3、页面集成说明3.1、直播分享页集成3.1.1、查看通道3.1.2、开启分享3.1.3、分享页面传参3.1.4、分享页面播放3.2、时间轴回放分享页集成3.3、电子地图分享页集成4、视频流地址播放集成说明4.1、获取直播流地......