首页 > 其他分享 >混合选择图片和视频

混合选择图片和视频

时间:2024-08-16 21:52:30浏览次数:15  
标签:视频 或者 文件 混合选择 视频文件 方法 图片

文章目录


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

在这里插入图片描述

1. 概念介绍

我们在上一章回中介绍了混合选择图片和视频文件,不过选择文件时不论是图片还是视频,只能选择一个文件,这个显然无法满足项目需求。本章回中将介绍如何混合选择
多个图片和视频文件,也就是说不限定图片或者视频文件的数量。

2. 方法与细节

包中提供了pickMultipleMedia()方法来混合选择图片或者视频文件,它和我们在上一章回中介绍的pickMedia()方法的使用方法类似,我们在接下来的小节中将
介绍具体的实现方法和相关细节。

2.1 实现方法

下面是混合选择多个图片或者视频文件的实现方法,不过该方法中不包含导入包相关的操作,因为我们在前面章回中已经导入了image_picker包。

  • 创建文件选择器对象,也就是包中提供的ImagePicker类的实例;
  • 使用文件选择器的pickMultipleMedia()方法获取图片或者视频文件;
  • 上一步中的方法将返回图片或者视频文件在本地存储中的相对路径;
  • 判断文件类型,并且依据文件类型来显示图片文件或者播放视频文件;
    注意:不论是图片文件还是视频文件,获取到文件路径后都要介绍文件路径的可靠性,否则会引起程序异常。

2.2 具体细节

上面的步骤中使用了ImagePicker的pickMultipleMedia()方法,该方法返回的是Future<List<XFile>>类型的对象,因此我们需要通过Future的then方法
来获取图片或者视频文件的路径。此外,该方法需要异步运行,因为获取图片或者视频文件路径是比较耗时的操作,而且它会获取多个图片或者视频文件的路径。

3. 示例代码

List<XFile>? _multiMediaFileList;

ImagePicker imagePicker = ImagePicker();

double imgWidth = 200;
double imgHeight = 400;

Future<List<XFile>> getMultiMedia() async {
  var list = await imagePicker.pickMultipleMedia(
      maxHeight: imgHeight, maxWidth: imgWidth, imageQuality: 100);
  return list;
}


ElevatedButton(
  onPressed: () {
    getMultiMedia().then((value) {
      setState(() {
        _multiMediaFileList = value;
      });
    });
  },
  child: const Text("load multiMedia"),
),

上面的示例代码中演示了如何混合获取多个图片和视频文件,我们在代码中把pickMultipleMedia()方法封装成了异步方法,并且将它绑定到按钮上,这样就可以在点
击按钮时发出获取图片或者视频文件的指令,此时会打开一个文件选择器的窗口,我们可以在该窗口中以可视化操作的方式选择图片或者视频文件。图片或者视频文件上会
显示小圆圈,主要用来提示用户哪些图片被选择。 代码中没有演示显示图片和播放视频文 件的方法,详细内容可以参考前面章回中的内容,因为我们刚刚介绍完,所以就
不再详细演示了。不过有些细节我们还需要说明:代码中显示图片或者播放视频文件前需要 检查文件路径,文件路径在程序最开始运 行时为null,在程序运行后,但是没
有选择任何图片或者视频文件时文件路径不为空,而是为empty,这点需要特别注意。此外,因为是混合选择图片或者视频文件,所以我们需要判断文件的类型,此时使用
前面章回介绍过的mime包就可以。获取到文件类型后可以使用Image组件来显示图片文件或者使用VideoPlayer组件来播放视频文件,示例代码中没有这部分代码,大
家参考前面章回中的示例代码就可以。此外,我们建议在Image组件或者VieoPlayer组件外层嵌套了一个ListView,这样可以滚动显示多张图片或者视频,示例代码中
没有列出来,大家可以参考前面章回中显示多个图片的示例代码。

4. 内容总结

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

  • Flutter官方提供了image_picker包,该包以可视化操作的方式获取图片或者视频文件路径;
  • 使用包中的pickMultipleMedio()方法可以获取到当前手机文件系统中多个图片文件或者视频文件的相对路径;
  • 显示图片或者播放视频文件前需要判断文件类型,通过mime包可以获取到文件的类型;
  • 显示图片或者播放视频文件前需要检查文件路径的可靠性,不然可能无法显示图片或者无法播放视频;
  • 显示图片或者播放视频文件时建议通过列表来实现,这样可以滑动显示多个图片或者视频文件;
    看官们,与"如何混合选择多个图片和视频文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:视频,或者,文件,混合选择,视频文件,方法,图片
From: https://blog.csdn.net/talk_8/article/details/141269908

相关文章

  • 最新AI生成视频工具!效果不输快手可灵,CogVideoX下载介绍
    要说AI生成视频最火的项目,当属国产的快手可灵了,甚至比OpenAI的Sora还要火,前者还是个ppt,可灵已经在落地公测了,博主在前段时间申请试用通道的时候,竟然排到几十万人开外的位置,好在最后还是拿到了使用资格,还没用上的外国友人只能干着急,在社交媒体发「求求了!」但就在最近,可灵开始......
  • 最新AI生成视频工具!效果不输快手可灵,CogVideoX下载介绍
    要说AI生成视频最火的项目,当属国产的快手可灵了,甚至比OpenAI的Sora还要火,前者还是个ppt,可灵已经在落地公测了,博主在前段时间申请试用通道的时候,竟然排到几十万人开外的位置,好在最后还是拿到了使用资格,还没用上的外国友人只能干着急,在社交媒体发「求求了!」 但就在最近,可灵开始......
  • 智慧社区新视界:EasyCVR视频汇聚平台下的数字化治理实践
    在当今科技飞速发展的时代,“数字城市智慧社区”这个概念正逐渐走进我们的生活。那么,数字城市智慧社区到底是什么样子的呢?随着城市化的不断推进,数字城市建设已成为提升城市管理效率、改善居民生活质量的重要手段。智慧社区作为数字城市建设的重要组成部分,正逐步融入各种高科技手段......
  • EasyCVR视频汇聚平台构建远程安防监控:5大亮点解析,助力安防无死角
    随着科技的飞速发展,远程安防监控系统已经成为现代社会中不可或缺的一部分,无论是在小区、公共场所还是工业领域,安防监控都发挥着至关重要的作用。而EasyCVR作为一款功能强大的视频监控综合管理平台,其在构建远程安防监控系统方面展现出了诸多显著优点。1、灵活部署与扩展性EasyCVR......
  • EasyCVR视频汇聚平台:打造全栈视频监控系统的基石,解锁可视化管理与高效运维
    随着科技的飞速发展,视频监控已成为现代社会不可或缺的一部分,广泛应用于社区、公共场所、工业领域等多个场景。EasyCVR视频汇聚平台,作为一款高性能的视频汇聚管理平台,凭借其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。本文将深入探讨EasyCVR视频......
  • WebRTC为何成为视频开发领域的首选技术?
    随着互联网的飞速发展,视频通信已成为日常生活和工作中不可或缺的一部分。从在线教育、视频会议到远程医疗、在线直播,视频开发的需求日益增长。在这些应用场景中,选择何种技术来构建视频系统至关重要。目前,在很多视频业务的开发中,大家都热衷于选择使用WebRTC技术。WebRTC(WebReal-T......
  • Unity Editor 保存图片、缩放纹理
    usingSystem.IO;usingUnityEditor;usingUnityEngine;publicclassConvertIconToMultipleSizes:Editor{[MenuItem("Assets/ConvertIconToMultipleSizes",true)]privatestaticboolValidateSplitFbxAnimation(){if(Selection.......
  • 单图换脸神器Roop一键包:解锁无限制版,只需一张照片和视频,无需训练,一键替换
    简介最近,一款名为Roop的开源项目在GitHub上火爆异常,短短不到一个月的时间内就收获了近万颗星(stars),足见其受欢迎程度。这款工具由一位名叫"s0md3v"的开发者创建,是一个傻瓜式换脸工具,但是对于非IT界人士所要求的步骤还是比较复杂,现提供一键运行包,下载即可使用,操作界面友好简单强大......
  • 治理两个自动播放视频的应用:微信、浏览器
    你的流量是否偷偷跑了?   首先,微信发现页--在「搜一搜」界面点击右上角的「···」,可以看到「搜一搜」的新增了「移动网络下视频自动播放」的开关。关闭后,在手机连接移动网络的状态下,将不会再自动播放视频 此外,浏览器在设置页面,点击用户权限设置。   在用......
  • 基于深度学习的图片风格转化
    基于深度学习的图片风格转化作者:禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming1.背景介绍1.1问题的由来图片风格转化是计算机视觉领域一个充满魅力且极具挑战性的课题。它旨在将一张普通照片转换成具有特定艺术风格的图像,如梵高风格、莫奈风格、......