Flutter图片选择器——image_picker插件的使用
image_picker是flutter官方维护开发的一个本地图片选择的插件。
安装
点image_picker获取最新版本,在pubspec.yaml添加如下内容:
image_picker: ^latest_version
Android
打开app/src/main/AndroidManifest.xml文件,添加如下内容
<manifest>
<application>
...
</application>
// 写入文件权限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
// 读取文件权限
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
// 相机权限
<uses-permission android:name="android.permission.CAMERA" />
</manifest>
IOS
暂无
使用
// ImagePicker获取内容后返回的对象是XFile
XFile? image;
List<XFile>? imageList;
XFile? video;
// 使用ImagePicker前必须先实例化
final ImagePicker _imagePicker = ImagePicker();
ImagePicker类一共有3个实例方法,分别用来读取图片和视频:
pickImage
pickImage用来选择单张图片,可以传递5个参数:
required ImageSource source
:该属性需要传递一个ImageSource类的枚举值:ImageSource.gallery
:获取手机图库的所有图片进行选择ImageSource.camera
:调用摄像头拍摄一张图片并选择
double? maxWidth
:用来指定选择图片的最大宽度,若图片超过该宽度,将等比例缩小图片再返回,默认返回原始图片double? maxHeight
:用来指定选择图片的最大高度,若图片超过该高度,将等比例缩小图片再返回,默认返回原始图片int? imageQuality
:用来修改图片返回的质量(压缩),取值在0-100,越大返回图片的质量越高,默认为100,即原始图片CameraDevice preferredCameraDevice
:当使用ImageSource.camera
时,调用前置摄像头还是后置摄像头(注意,Android 没有记录参数来指定是否应打开前置或后置摄像头,此功能不能保证在 Android 设备上工作)。该属性也是传递一个枚举值:CameraDevice.rear
:调用前置摄像头(默认)CameraDevice.front
:调用后置摄像头
ImageSource.gallery
从图库选择单张图片
selectImage() async {
XFile? image = await _imagePicker.pickImage(
source: ImageSource.gallery,
);
if (image != null) this.image = image;
setState(() {});
}
// 设置返回图片的其他参数
selectImage() async {
XFile? image = await _imagePicker.pickImage(
source: ImageSource.gallery,
maxHeight: 250,
maxWidth: 250,
);
if (image != null) this.image = image;
setState(() {});
}
// 设置返回图片的其他参数
selectImage() async {
XFile? image = await _imagePicker.pickImage(
source: ImageSource.gallery,
imageQuality: 0,
);
if (image != null) this.image = image;
setState(() {});
}
该属性用来压缩返回的图像,用肉眼很难看出差别。例如微信发图片总是会被压缩,就可以使用该属性实现。仅某些图像类型(例如 JPEG)以及 Android PNG 和 WebP 支持压缩。
ImageSource.camera
打开相机拍摄选择相片
selectCamera() async {
XFile? photo = await _imagePicker.pickImage(
source: ImageSource.camera,
preferredCameraDevice: CameraDevice.rear,
if (photo != null) image = photo;
setState(() {});
);
}
pickMultiImage
pickImage用来选择多张图片,可以传递3个参数:
double? maxWidth
:用来指定选择图片的最大宽度,若图片超过该宽度,将等比例缩小图片再返回,默认返回原始图片double? maxHeight
:用来指定选择图片的最大高度,若图片超过该高度,将等比例缩小图片再返回,默认返回原始图片int? imageQuality
:用来修改图片返回的质量,取值再0-100,越大返回图片的质量越高,默认为100,即原始图片
selectMultiImage() async {
List<XFile>? images = await _imagePicker.pickMultiImage();
if (images != null) imageList = images;
setState(() {});
}
注意:选择多张图片时,必须长按才能多选,否则只会选择一张
pickVideo
pickVideo用来选择视频,可以传递3个参数:
-
required ImageSource source
:该属性和pickImage一样,是从图库选择视频还是拍摄视频 -
CameraDevice preferredCameraDevice
:当选择拍摄视频时,时使用前置还是后置摄像头工作 -
Duration? maxDuration
:用来指定捕获的视频的最长时间,默认为无限制
ImageSource.galler
selectVideo() async {
XFile? video = await _imagePicker.pickVideo(source: ImageSource.gallery);
if (video != null) {
this.video = video;
_playerController = VideoPlayerController.file(File(video.path))
..initialize().then((_) {
setState(() {
_playerController.play();
});
});
}
}
限制视频的最长时长:
XFile? video = await _imagePicker.pickVideo(
source: ImageSource.gallery,
maxDuration: const Duration(milliseconds: 1000),
);
动图就不放了,maxDuration 这个属性当 source 为 ImageSource.galler
时无效,具体可以自己试验一下。
ImageSource.camera
XFile? video = await _imagePicker.pickVideo(
source: ImageSource.camera,
maxDuration: const Duration(milliseconds: 3000),
);
可以看到 maxDuration: const Duration(milliseconds: 3000)
控制了拍摄时的最长时间。
同样的,设置前后置摄像头拍摄的参数 preferredCameraDevice
并不一定会起作用。
本文作者:菠萝橙子丶
本文链接:https://www.cnblogs.com/ilgnefz/p/15954507.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步