react native image crop picker
v0.41.5
iOS/Android圖像選擇器，並支持相機，視頻，可配置的壓縮，多個圖像和裁剪
導入庫
import ImagePicker from 'react-native-image-crop-picker' ;用裁剪致電單像選擇器
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 ) ;
} ) ;Android：眾所周知，“裁剪”的道具會導致視頻不在Android上的畫廊中顯示。選擇視頻時，請不要將裁剪設置為True。
ImagePicker . openCamera ( {
width : 300 ,
height : 400 ,
cropping : true ,
} ) . then ( image => {
console . log ( image ) ;
} ) ; ImagePicker . openCamera ( {
mediaType : 'video' ,
} ) . then ( image => {
console . log ( image ) ;
} ) ; ImagePicker . openCropper ( {
path : 'my-file-path.jpg' ,
width : 300 ,
height : 400
} ) . then ( image => {
console . log ( image ) ;
} ) ;模塊正在創建TMP圖像，這些圖像將來會自動清理。如果要強制清理，則可以使用clean清潔所有TMP文件，或cleanSingle(path)清潔單個TMP文件。
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| 財產 | 類型 | 描述 |
|---|---|---|
| 種植 | 布爾（默認為false） | 啟用或禁用裁剪 |
| 寬度 | 數字 | 與cropping選項一起使用時結果圖像的寬度 |
| 高度 | 數字 | 與cropping選項一起使用時結果圖像的高度 |
| 多種的 | 布爾（默認為false） | 啟用或禁用多個圖像選擇 |
| writeTemPfile（僅iOS） | 布爾（默認為true） | 設置為false時，請勿為所選圖像編寫臨時文件。當您使用includeBase64選項檢索文件內容時，這對於提高性能很有用，並且無需從磁盤讀取文件。 |
| 包括base64 | 布爾（默認為false） | 設置為TRUE時，圖像文件內容將作為data屬性中的base64編碼字符串提供。提示：要將此字符串用作圖像源，請使用以下內容： <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| includeexif | 布爾（默認為false） | 在響應中包括圖像EXIF數據 |
| 避開emptivenspacearoundimage（僅iOS） | 布爾（默認為true） | 設置為true時，圖像將始終填充蒙版空間。 |
| CropperactiveWidgetColor（僅Android） | 字符串（默認為"#424242" ） | 裁剪圖像時，確定ActiveWidget顏色。 |
| 農作物巴爾科勒（僅Android） | 字符串（默認#424242 ） | 裁剪圖像時，確定狀態欄的顏色。 |
| Croppertoolbarcolor（僅Android） | 字符串（默認#424242 ） | 裁剪圖像時，確定工具欄的顏色。 |
| croppertoolbarwidgetColor（僅Android） | 字符串（默認darker orange ） | 裁剪圖像時，確定工具欄文本和按鈕的顏色。 |
| freestylecropenable | 布爾（默認為false） | 使用戶能夠將自定義矩形區域應用於裁剪 |
| Croppertoolbartitle | 字符串（默認Edit Photo ） | 裁剪圖像時，確定工具欄的標題。 |
| Croppercircleoverlay | 布爾（默認為false） | 啟用或禁用圓形裁剪面膜。 |
| disablecroppercolorsetters（僅Android） | 布爾（默認為false） | 裁剪圖像時，請禁用用於裁剪庫的顏色設置器。 |
| Minfiles（僅iOS） | 數字（默認1） | 使用multiple選項時要選擇的文件數量 |
| maxfiles（僅iOS） | 數字（默認5） | 使用multiple選項時要選擇的最大文件數 |
| waitanimationEnd（僅iOS） | 布爾（默認為true） | 一旦調用completion Promise將解決/拒絕 |
| SmartAlbums（僅iOS） | 數組（支持值）（默認['userlibrary'，'photostream'，'Panoramas'，'Videos'，'busts']） | 智能專輯列表可供選擇 |
| 使用FrontCamera | 布爾（默認為false） | 打開時是否默認為前/“自拍”相機。請注意，並非所有的Android設備都處理此參數，請參閱第1058頁 |
| CompressVideOpReset（僅iOS） | 字符串（默認中型質量） | 選擇哪個預設將用於視頻壓縮 |
| compressimageMaxWidth | 數字（默認無） | 最大寬度壓縮圖像 |
| CompressimageMaxheight | 數字（默認無） | 壓縮圖像最大高度 |
| 壓縮圖 | 數字（默認1（android）/0.8（ios）） | 用質量壓縮圖像（從0到1，其中1是最佳質量）。在iOS上，大於0.8的值在大多數圖像中不會產生明顯的質量增加，而值為0.8的值將使文件大小降低約一半或更小於1。 |
| LoadingLabelText（僅iOS） | 字符串（默認“處理資產...”） | 在Picker中加載照片時顯示的文字 |
| 介體 | 字符串（默認任何一個） | 接受圖像選擇的接受介質可以是：“照片”，“視頻”或“任何”之一 |
| showselectedCount（僅iOS） | 布爾（默認為true） | 是否顯示選定資產的數量 |
| 排序訂單（僅iOS） | string（默認'none'，支持的值：'asc'，'desc'，'none'） | 在打開圖像拾音器時，在專輯/詳細信息視圖中顯示媒體的顯示方式上的創建日期上應用了排序訂單 |
| forcejpg（僅iOS） | 布爾（默認為false） | 是否將照片轉換為JPG。這還將將任何現場照片轉換為JPG表示 |
| showcropguidelines（僅Android） | 布爾（默認為true） | 是否在裁剪期間顯示圖像頂部的3x3網格 |
| showcropframe（僅Android） | 布爾（默認為true） | 是否在裁剪期間展示作物框架 |
| hidebottomControls（僅Android） | 布爾（默認為false） | 是否顯示底部控件 |
| Enablerotation gesterure（僅Android） | 布爾（默認為false） | 是否通過手勢啟用圖像 |
| cropperchoosetext（僅iOS） | 字符串（默認選擇） | 選擇按鈕文字 |
| Cropperchoosecolor（僅iOS） | 字符串（默認#FFCC00 ） | 選擇按鈕的十六進制格式顏色。默認顏色由TocropviewController控制。 |
| CropperCancelText（僅iOS） | 字符串（默認取消） | 取消按鈕文字 |
| CropperCancelColor（僅iOS） | 字符串（默認色調iOS顏色） | 六角形格式為取消按鈕。默認值是由ToCropViewController控制的默認色調iOS顏色 |
| Cropperrotatebuttonshidden（僅IOS） | 布爾（默認為false） | 啟用或禁用農作物旋轉按鈕 |
注意：這些類型中的某些可能在所有iOS版本上都不可用。請務必檢查一下以避免問題。
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| 財產 | 類型 | 描述 |
|---|---|---|
| 小路 | 細繩 | 選定的圖像位置。當writeTempFile選項設置為false時，這是無效的。 |
| LocalIdentifier（僅iOS） | 細繩 | 選定的圖像的局部Identientifier，用於phasset搜索 |
| SourceUrl（僅iOS） | 細繩 | 選定的圖像的源路徑，沒有寫入訪問 |
| 文件名 | 細繩 | 選定的圖像的文件名 |
| 寬度 | 數字 | 選定的圖像寬度 |
| 高度 | 數字 | 選定的圖像高度 |
| 啞劇 | 細繩 | 選定的圖像MIME類型（Image/JPEG，Image/PNG） |
| 尺寸 | 數字 | 選定的圖像大小在字節中 |
| 期間 | 數字 | 視頻持續時間以毫秒為單位 |
| 數據 | 基礎64 | 可選的base64選定的文件表示 |
| exif | 目的 | 從圖像中提取EXIF數據。響應格式是平台特定的 |
| the | 目的 | 裁剪圖像矩形（寬度，高度，X，Y） |
| creationdate（僅iOS） | 細繩 | 創建圖像時Unix時間戳 |
| 修改 | 細繩 | 最後修改圖像時Unix時間戳 |
npm i react-native-image-crop-picker --save cd ios
pod install在Xcode Open Info.plist中，並添加字符串鍵NSPhotoLibraryUsageDescription ，其中描述了您為什麼需要訪問用戶照片的值。更多信息在這裡https://forums.developer.apple.com/thread/62229。根據您使用的功能，您可能還需要NSCameraUsageDescription和NSMicrophoneUsageDescription鍵。
build.gradle的存儲庫部分，並將Android SDK版本更改為33。（Android/build.gradle） buildscript {
ext {
buildToolsVersion = " 31.0.0 "
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
.. .
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url " $r ootDir /../node_modules/react-native/android " }
// ADD THIS
maven { url ' https://maven.google.com ' }
// ADD THIS
maven { url " https://www.jitpack.io " }
}
}useSupportLibrary （android/app/build.gradle） android {
.. .
defaultConfig {
.. .
vectorDrawables . useSupportLibrary = true
.. .
}
.. .
} 3.3.3
3.4.3
3.5.4
3.6.4
4.0.1
參考有關更多詳細信息＃1406
如果您使用SDK版本> = 33，請添加以下內容到app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [可選]如果要在項目中使用攝像機選擇器，請添加以下內容到app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/> [可選]如果要使用前置攝像頭，也將以下添加到app/src/main/ AndroidManifest.xml
<uses-feature android:name="android.hardware.camera" android:required="false" /><uses-feature android:name="android.hardware.camera.front" android:required="false" />由於所有貢獻的人，該項目的存在。 [貢獻]。
感謝我們所有的支持者！ [成為支持者]
通過成為贊助商來支持這個項目。您的徽標將在此處顯示您網站的鏈接。 [成為贊助商]
麻省理工學院
