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 并不一定会起作用。