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 ) ;
} ) ;| Свойство | Тип | Описание |
|---|---|---|
| обрезка | Bool (по умолчанию false) | Включить или отключить обрезку |
| ширина | число | Ширина изображения результата при использовании с опцией cropping |
| высота | число | Высота изображения результата при использовании с опцией cropping |
| несколько | Bool (по умолчанию false) | Включить или отключить выбор нескольких изображений |
| writetempfile (только ios) | Bool (по умолчанию True) | При установке в FALSE не записывает временные файлы для выбранных изображений. Это полезно для повышения производительности, когда вы получаете содержимое файла с опцией includeBase64 и не нужно читать файлы с диска. |
| Включите Base64 | Bool (по умолчанию false) | При установке в True содержимое файла изображения будет доступно в качестве строки, кодированной BASE64 в свойстве data . Подсказка: чтобы использовать эту строку в качестве источника изображения, используйте ее как: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| Includeexif | Bool (по умолчанию false) | Включите данные Exif в ответ |
| Избегайте emptyspacearoundimage (только для iOS) | Bool (по умолчанию True) | Когда установлено в True, изображение всегда заполняет пространство маски. |
| CropperactiveWidgetColor (только для Android) | String (по умолчанию "#424242" ) | При обрезке изображения определяет цвет ActiveWidget. |
| Cropperstatusbarcolor (только для Android) | строка (по умолчанию #424242 ) | При обрезке изображения определяет цвет статуса. |
| Croppertoolbarcolor (только для Android) | строка (по умолчанию #424242 ) | При изображении обрезки определяет цвет панели инструментов. |
| CroppertoolbarwidgetColor (только для Android) | Строка (по умолчанию darker orange ) | При обрезке изображения определяет цвет текста панели инструментов и кнопок. |
| Freestylecropenabled | Bool (по умолчанию false) | Позволяет пользователю применять пользовательскую область прямоугольника для обрезки |
| Croppertoolbartitle | String (по умолчанию Edit Photo ) | При обрезке изображения определяет название панели инструментов. |
| Croppercircleoverlay | Bool (по умолчанию false) | Включить или отключить круговую обрезку. |
| insilecroppercolorsetters (только для Android) | Bool (по умолчанию false) | При обрезке изображения отключает цветовые сеттеры для библиотеки обрезки. |
| Minfiles (только iOS) | номер (по умолчанию 1) | Минимальное количество файлов для выбора при использовании multiple вариантов |
| MaxFiles (только iOS) | номер (по умолчанию 5) | Максимальное количество файлов для выбора при использовании multiple опций |
| waitAnimationend (только iOS) | Bool (по умолчанию True) | Обещание будет разрешено/отклонить после вызова блок completion ViewController |
| Smartalbums (только iOS) | Array (поддерживаемые значения) (по умолчанию [«userLibrary», «Photostream», «Panoramas», «Videos», «Burss»]) | Список умных альбомов на выбор |
| USEFRONTCAMERA | Bool (по умолчанию false) | Будь то по умолчанию в фронта/селфи -камере при открытии. Обратите внимание, что не все устройства Android обрабатывают этот параметр, см. Выпуск № 1058 |
| CompressVideOpreset (только iOS) | Строка (по умолчанию среднего качества) | Выберите, какая предустановка будет использоваться для сжатия видео |
| CompressImageMaxWidth | номер (по умолчанию нет) | Сжатие изображения с максимальной шириной |
| CompressImageMaxHeight | номер (по умолчанию нет) | Сжатие изображения с максимальной высотой |
| CompressImageQuality | номер (по умолчанию 1 (Android) /0,8 (iOS)) | Сжатие изображения с качеством (от 0 до 1, где 1 лучшее качество). На iOS значения, превышающие 0,8, не производят заметное увеличение качества на большинстве изображений, в то время как значение 0,8 уменьшит размер файла примерно на половину или менее по сравнению со значением 1. |
| загрузка labelbeltext (только iOS) | String (по умолчанию "обработка активов ...") | Текст отображается во время загрузки фото в Picker |
| MediaType | Строка (по умолчанию любой) | Принятый MediaType для выбора изображений может быть одним из: 'photo', 'video' или 'any' |
| ShowsSelectedCount (только iOS) | Bool (по умолчанию True) | Показывать ли количество выбранных активов |
| sortorder (только iOS) | String (по умолчанию 'none', поддерживаемые значения: 'asc', 'desc', 'none') | Применяет порядок сортировки на дату создания того, как медиа отображается в видах с фотографиями альбомов/деталей при открытии Picker Picker |
| ForceJpg (только iOS) | Bool (по умолчанию false) | Будет ли конвертировать фотографии в JPG. Это также преобразует любую живую фотографию в свое представление JPG |
| Showcropguidelines (только для Android) | Bool (по умолчанию True) | Показать 3х3 сетку поверх изображения во время обрезки |
| ShowCropFrame (только для Android) | Bool (по умолчанию True) | Показывать ли рамка урожая во время обрезки |
| HidebottomControls (только для Android) | Bool (по умолчанию false) | Отображать нижние элементы управления |
| EneblerotationGesture (только для Android) | Bool (по умолчанию false) | Включить ли поворот изображения вручную жестом |
| CropperChoosetext (только iOS) | string (по умолчанию выберите) | Выберите текст кнопки |
| Cropperchoosecolor (только iOS) | String (по умолчанию #FFCC00 ) | Гекс формат цвет для кнопки выберите. Цвет по умолчанию контролируется ToCropViewController. |
| CropperCancelText (только iOS) | string (отмена по умолчанию) | Отмена кнопки текста |
| CropperCancelColor (только iOS) | Строка (по умолчанию оттенок iOS Color) | Гекс формат цвет для кнопки отмены. Значение по умолчанию - это оттенок по умолчанию в iOS Color, управляемый ToCropViewController |
| Cropperrotatebuttonshidden (только iOS) | Bool (по умолчанию false) | Включить или отключить кнопки вращения Cropper |
Примечание. Некоторые из этих типов могут быть недоступны во всех версиях iOS. Обязательно проверьте это, чтобы избежать проблем.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| Свойство | Тип | Описание |
|---|---|---|
| путь | нить | Выбранное местоположение изображения. Это NULL, когда опция writeTempFile установлена на false. |
| LocalIdentifier (только iOS) | нить | Selected Images 'LocalIdentifier, используемый для поиска фанатиков |
| Sourceurl (только iOS) | нить | Источник выбранных изображений, не иметь доступа к записи |
| имя файла | нить | Избранные изображения имени файла |
| ширина | число | Выбранная ширина изображения |
| высота | число | Выбранная высота изображения |
| мима | нить | Выбранное изображение тип MIME (Image/JPEG, Image/PNG) |
| размер | число | Выбранный размер изображения в байтах |
| продолжительность | число | Время продолжительности видео в миллисекундах |
| данные | База64 | Необязательно выбранное представление файла Base64 |
| выпуск | объект | Извлеченные данные EXIF из изображения. Формат ответа является специфичным для платформы |
| Croperct | объект | Прямоугольник с обрезанным изображением (ширина, высота, x, y) |
| CreationDate (только iOS) | нить | Unix TimeStamp Когда было создано изображение |
| модификация | нить | Unix TimeStamp, когда изображение было последним изменено |
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 Keys.
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" />Этот проект существует благодаря всем людям, которые вносят свой вклад. [Способствовать].
Спасибо всем нашим покровителям! [Станьте покровителем]
Поддержите этот проект, став спонсором. Ваш логотип будет отображаться здесь со ссылкой на ваш сайт. [Станьте спонсором]
Грань
