React Native圖片選擇裁剪組件

本文原創首發於公衆號：ReactNative開發圈，轉載需註明出處。

React Native圖片選擇裁剪組件：react-native-image-crop-picker，支持安卓和IOS雙平臺，支持從相冊、相機選擇圖片和視頻，能夠單選和多選，能夠壓縮和裁剪。

效果圖

安裝方法

npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

若是須要操做視頻，須要安裝

npm i react-native-video --save
react-native link react-native-video

由於須要操做相冊和相機，IOS須要增長隱私訪問說明，修改info.plist文件增長如下項：

<key>NSPhotoLibraryUsageDescription</key>
    <string>此 App 須要您的贊成才能讀取相冊</string>
    <key>NSCameraUsageDescription</key>
    <string>此 App 須要您的贊成才能使用相機</string>

示例代碼

從相冊選擇單個圖片並裁剪

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

從相冊選擇多個圖片

ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});

從相冊選擇視頻

ImagePicker.openPicker({
  mediaType: "video",
}).then((video) => {
  console.log(video);
});

從相機選擇圖片

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

裁剪圖片

ImagePicker.openCropper({
  path: 'my-file-path.jpg',
  width: 300,
  height: 400
}).then(image => {
  console.log(image);
});

主要參數說明

• cropping 是否進行裁剪 bool (default false)
• width 裁剪圖片的寬度
• height 裁剪圖片的高度
• multiple 是否多選 bool (default false)
• includeBase64 是否返回Base64的圖片數據 bool (default false)
• mediaType 媒體類別 'photo', 'video', or 'any'
• cropperCircleOverlay 使用圓形遮蓋裁剪

完整示例

完整代碼：GitHub - forrest23/ReactNativeComponents: React Native組件大全，介紹React Native經常使用組件的使用方法和使用示例
本次示例代碼在 Component08文件夾中。請不要吝嗇大家的Star！

組件地址

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

微信不讓跳轉外鏈，能夠點擊查看原文來查看外鏈GitHub內容。

舉手之勞關注個人微信公衆號：ReactNative開發圈