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 並不一定會起作用。