react native image crop picker
v0.41.5
iOS/Android Image Picker mit Unterstützung für Kamera, Video, konfigurierbare Komprimierung, mehrere Bilder und Zuschneiden
Bibliothek importieren
import ImagePicker from 'react-native-image-crop-picker' ;Rufen Sie eine einzelne Image -Auswahl mit Zuschneiden auf
ImagePicker . openPicker ( {
width : 300 ,
height : 400 ,
cropping : true
} ) . then ( image => {
console . log ( image ) ;
} ) ;Rufen Sie mehrere Image Picker an
ImagePicker . openPicker ( {
multiple : true
} ) . then ( images => {
console . log ( images ) ;
} ) ;Wählen Sie Video nur aus der Galerie aus
ImagePicker . openPicker ( {
mediaType : "video" ,
} ) . then ( ( video ) => {
console . log ( video ) ;
} ) ;Android: Es ist bekannt, dass die Requisite "Cropping" in der Galerie auf Android nicht angezeigt werden. Bitte setzen Sie bei der Auswahl von Videos nicht auf True TRUE ein.
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 ) ;
} ) ; Das Modul erstellt TMP -Bilder, die in Zukunft automatisch aufgeräumt werden. Wenn Sie die Reinigung erzwingen möchten, können Sie clean zum Reinigen aller TMP -Dateien oder cleanSingle(path) verwenden, um eine einzelne TMP -Datei zu reinigen.
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| Eigentum | Typ | Beschreibung |
|---|---|---|
| Zuschneiden | bool (Standard falsch) | Aktivieren oder deaktivieren |
| Breite | Nummer | Breite des Ergebnisbildes bei Verwendung mit cropping |
| Höhe | Nummer | Höhe des Ergebnisbildes, wenn sie mit cropping verwendet werden |
| mehrere | bool (Standard falsch) | Aktivieren oder deaktivieren Sie mehrere Bildauswahl |
| WriteTeMpfile (nur iOS) | bool (Standard true) | Wenn Sie auf False gesetzt sind, schreiben Sie keine temporären Dateien für die ausgewählten Bilder. Dies ist nützlich, um die Leistung zu verbessern, wenn Sie Dateiinhalte mit der Option includeBase64 abrufen und keine Dateien von der Festplatte lesen müssen. |
| includeBase64 | bool (Standard falsch) | Wenn der Bilddateiinhalt auf TRUE eingestellt ist, wird in der data als Base64-kodierter Zeichenfolge verfügbar sein. Hinweis: Verwenden Sie diese Zeichenfolge als Bildquelle und verwenden Sie sie wie: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| inklusiveexif | bool (Standard falsch) | Geben Sie Bild EXIF -Daten in die Antwort ein |
| meidentemptyspaceAroundimage (nur iOS) | bool (Standard true) | Wenn das Bild auf True gesetzt ist, füllt es immer den Maskenraum. |
| cropperactiveWidgetColor (nur Android) | String (Standard "#424242" ) | Bestimmt beim Kruppieren die ActiveWidget -Farbe. |
| Cropperstatusbarcolor (nur Android) | String (Standard #424242 ) | Ermittelt beim Beschneiden die Farbe des Statusbuchs. |
| Croppertoolbarcolor (nur Android) | String (Standard #424242 ) | Bestimmen Sie beim Beschneiden die Farbe der Symbolleiste. |
| croppertoolbarwidgetColor (nur Android) | String (Standard darker orange ) | Ermittelt beim Kruppieren die Farbe von Symbolleisten Text und Schaltflächen. |
| freestylecropenabled | bool (Standard falsch) | Ermöglicht dem Benutzer, benutzerdefinierten Rechteckbereich zum Anbau anzuwenden |
| CroppertoolBartitle | String ( Edit Photo ) | Ermittelt beim Beschneiden den Titel der Symbolleiste. |
| CropperCircleoverlay | bool (Standard falsch) | Aktivieren oder deaktivieren Sie kreisförmige Anbausmaske. |
| DefabableCropperColorStters (nur Android) | bool (Standard falsch) | Deaktiviert das Bild, wenn Sie das Bild zubereiten, die Farbsetzer für die Anbausbibliothek deaktiviert. |
| Minfiles (nur iOS) | Nummer (Standard 1) | Min Anzahl der Dateien, die Sie bei der Verwendung multiple Optionen auswählen können |
| Maxfiles (nur iOS) | Nummer (Standard 5) | Maximale Anzahl von Dateien, die bei der Verwendung multiple Option ausgewählt werden können |
| Waitanimationend (nur iOS) | bool (Standard true) | Versprechen wird auflösen/ablehnen, sobald ViewController completion aufgerufen wird |
| Smartalbums (nur iOS) | Array (unterstützte Werte) (Standard ['Benutzerlibrary', 'Fotostream', 'Panoramas', 'Videos', 'Bursts']) | Liste der intelligenten Alben zur Auswahl |
| UseFrontcamera | bool (Standard falsch) | Ob Sie nach der Öffnung standardmäßig nach vorne/'Selfie' Kamera. Bitte beachten Sie, dass nicht alle Android -Geräte diesen Parameter verarbeiten, siehe Ausgabe Nr. 1058 |
| Compressvideopreset (nur iOS) | String (Standard -Medienqualität) | Wählen Sie, welches Voreingang für die Videokomprimierung verwendet wird |
| CompressImagemaxwidth | Nummer (Standardein nicht) | Bild mit maximaler Breite komprimieren |
| CompressImagemaxHeight | Nummer (Standardein nicht) | Bild mit maximaler Höhe komprimieren |
| Komprimierung | Nummer (Standard 1 (Android) /0.8 (iOS)) | Komprimieren Sie Bild mit Qualität (von 0 bis 1, wobei 1 die beste Qualität ist). Bei iOS erzeugen Werte, die größer als 0,8 sind, bei den meisten Bildern keine bemerkenswerte Qualitätserhöhung, während ein Wert von 0,8 die Dateigröße um etwa die Hälfte oder weniger im Vergleich zu einem Wert von 1 verringert. |
| LoadingLabeltext (nur iOS) | String (Standard "Verarbeitungsvermögen ...") | Text angezeigt, während das Foto in Picker geladen wird |
| Mediitype | String (Standard) | In der Bildauswahl angenommene Medialtype kann eines von "Foto", "Video" oder "Any" gehören. |
| showsSelectedCount (nur iOS) | bool (Standard true) | Ob die Anzahl der ausgewählten Vermögenswerte angezeigt werden soll |
| Sorder (nur iOS) | String (Standard 'None', unterstützte Werte: 'ASC', 'Desc', 'None') | Wendet eine Sortierreihenfolge auf das Erstellungsdatum an, wie Medien beim Öffnen des Bildauswahl in den Alben/Detail -Fotoansichten angezeigt werden |
| ForceJPG (nur iOS) | bool (Standard falsch) | Ob Fotos in JPG umwandeln. Dies wird auch jedes Live -Foto in seine JPG -Darstellung umwandeln |
| showcropGuidelines (nur Android) | bool (Standard true) | Ob das 3x3 -Gitter während des Bildes auf dem Bild zeigen soll |
| showCropframe (nur Android) | bool (Standard true) | Ob während des Anbaus zu dem Ernterahmen angezeigt werden soll |
| HideBottomcontrols (nur Android) | bool (Standard falsch) | Ob Sie untere Steuerelemente angezeigt werden sollen |
| Enablerotationssteuer (nur Android) | bool (Standard falsch) | Ob das Drehen des Bildes von Hand Geste aktiviert werden soll |
| Cropperchoosetext (nur iOS) | String (Standard wählen) | Wählen Sie Schaltfläche Text |
| Cropperchoosecolor (nur iOS) | String (Standard #FFCC00 ) | Hex -Formatfarbe für die Taste auswählen. Die Standardfarbe wird von TocropviewController gesteuert. |
| Croppercanceltext (nur iOS) | String (Standardabbrechen) | Schaltflächentext abbrechen |
| CropperCancelColor (nur iOS) | String (Standard Tint iOS -Farbe) | Hex -Formatfarbe für die Schaltfläche Abbrechen. Standardwert ist der Standard -Tint iOS -Farb, der von TocropViewController gesteuert wird |
| cropperrotateButtonShidden (nur iOS) | bool (Standard falsch) | Aktivieren oder deaktivieren Sie Cropper -Drehknöpfe |
Hinweis: Einige dieser Typen sind möglicherweise nicht in allen iOS -Versionen verfügbar. Überprüfen Sie dies unbedingt, um Probleme zu vermeiden.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| Eigentum | Typ | Beschreibung |
|---|---|---|
| Weg | Saite | Ausgewählter Bildort. Dies ist null, wenn die Option writeTempFile auf false eingestellt ist. |
| Lokalidentifier (nur iOS) | Saite | Localidentifier der ausgewählten Bilder, verwendet für die Phasset -Suche |
| SourceURL (nur iOS) | Saite | Quellpfad der ausgewählten Bilder, haben keinen Schreibzugriff |
| Dateiname | Saite | Dateiname der ausgewählten Bilder |
| Breite | Nummer | Ausgewählte Bildbreite |
| Höhe | Nummer | Ausgewählte Bildhöhe |
| Mime | Saite | Ausgewählter Bildmime -Typ (Bild/JPEG, Bild/PNG) |
| Größe | Nummer | Ausgewählte Bildgröße in Bytes |
| Dauer | Nummer | Videodauerzeit in Millisekunden |
| Daten | Basis64 | Optionale Base64 Ausgewählte Dateidarstellung |
| exif | Objekt | Extrahierte exif -Daten aus dem Bild. Antwortformat ist plattformspezifisch |
| komisch | Objekt | Abgeschnittenes Bildrechteck (Breite, Höhe, x, y) |
| CreationDate (nur iOS) | Saite | UNIX -Zeitstempel, wenn das Bild erstellt wurde |
| ModificationDate | Saite | UNIX -Zeitstempel, als das Bild zuletzt modifiziert wurde |
npm i react-native-image-crop-picker --save cd ios
pod install In xcode öffnen info.plist und fügen Sie NSPhotoLibraryUsageDescription String -Taste hinzu. Weitere Informationen hier https://forums.developer.apple.com/thread/62229. Je nachdem, welche Funktionen Sie verwenden, benötigen Sie möglicherweise auch NSCameraUsageDescription und NSMicrophoneUsageDescription -Schlüssel.
build.gradle -Repositories -Abschnitt und ändern Sie die Android SDK -Version in 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
Referenz für weitere Details #1406
Wenn Sie SDK -Version> = 33 verwenden, fügen Sie den folgenden app/src/main/AndroidManifest.xml hinzu
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [Optional] Wenn Sie in Ihrem Projekt eine Kamera -Picker verwenden möchten, fügen Sie die folgende app/src/main/AndroidManifest.xml hinzu
<uses-permission android:name="android.permission.CAMERA"/> [Optional] Wenn Sie die Frontkamera verwenden möchten, fügen Sie auch die folgenden app/src/main/ AndroidManifest.xml hinzu
<uses-feature android:name="android.hardware.camera" android:required="false" /><uses-feature android:name="android.hardware.camera.front" android:required="false" />Dieses Projekt besteht dank aller Menschen, die einen Beitrag leisten. [Beitragen].
Vielen Dank an alle unsere Unterstützer! [Backer werden]
Unterstützen Sie dieses Projekt, indem Sie Sponsor werden. Ihr Logo wird hier mit einem Link zu Ihrer Website angezeigt. [Sponsor werden]
MIT
