react native image crop picker
v0.41.5
Picker d'image iOS / Android avec prise en charge de la caméra, de la vidéo, de la compression configurable, des images multiples et du recadrage
Bibliothèque d'importation
import ImagePicker from 'react-native-image-crop-picker' ;Appeler un seul cueilleur d'image avec recadrage
ImagePicker . openPicker ( {
width : 300 ,
height : 400 ,
cropping : true
} ) . then ( image => {
console . log ( image ) ;
} ) ;Appelez plusieurs séquelles d'image
ImagePicker . openPicker ( {
multiple : true
} ) . then ( images => {
console . log ( images ) ;
} ) ;Sélectionnez la vidéo uniquement dans la galerie
ImagePicker . openPicker ( {
mediaType : "video" ,
} ) . then ( ( video ) => {
console . log ( video ) ;
} ) ;Android: Le «Croping» de l'hélice est connu pour amener les vidéos à ne pas afficher dans la galerie sur Android. Veuillez ne pas définir de recadrage sur true lors de la sélection des vidéos.
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 ) ;
} ) ; Le module crée des images TMP qui vont être nettoyées automatiquement quelque part dans le futur. Si vous souhaitez forcer le nettoyage, vous pouvez utiliser clean pour nettoyer tous les fichiers TMP, ou cleanSingle(path) pour nettoyer le fichier TMP unique.
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| Propriété | Taper | Description |
|---|---|---|
| recadrage | bool (par défaut false) | Activer ou désactiver la culture |
| largeur | nombre | Largeur de l'image du résultat lorsqu'elle est utilisée avec l'option cropping |
| hauteur | nombre | Hauteur de l'image du résultat lorsqu'elle est utilisée avec une option de cropping |
| multiple | bool (par défaut false) | Activer ou désactiver la sélection d'images multiples |
| WriteTEmpFile (iOS uniquement) | bool (par défaut true) | Lorsqu'il est défini sur False, n'écrit pas de fichiers temporaires pour les images sélectionnées. Ceci est utile pour améliorer les performances lorsque vous récupérez le contenu des fichiers avec l'option includeBase64 et que vous n'avez pas besoin de lire des fichiers à partir du disque. |
| includeBase64 | bool (par défaut false) | Lorsqu'il est défini sur true, le contenu du fichier d'image sera disponible en tant que chaîne codée par base64 dans la propriété data . Astuce: Pour utiliser cette chaîne comme source d'image, utilisez-la comme: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| incluse | bool (par défaut false) | Incluez des données d'image EXIF dans la réponse |
| EvitemptySpaceAroundImage (iOS uniquement) | bool (par défaut true) | Lorsqu'il est réglé sur true, l'image remplira toujours l'espace du masque. |
| CropperactiveWidgetColor (Android uniquement) | String (par défaut "#424242" ) | Lors de l'image de recadrage, détermine la couleur activewidget. |
| CropperstatusBarcolor (Android uniquement) | String (par défaut #424242 ) | Lors de l'image de recadrage, détermine la couleur de la barre d'état. |
| CroppertoolBarColor (Android uniquement) | String (par défaut #424242 ) | Lors de l'image de recadrage, détermine la couleur de la barre d'outils. |
| CroppertoolBarWidgetColor (Android uniquement) | String (par défaut darker orange ) | Lors de l'image de recadrage, détermine la couleur du texte et des boutons de la barre d'outils. |
| freestylecropération | bool (par défaut false) | Permet à l'utilisateur d'appliquer une zone rectangulaire personnalisée pour la culture |
| Croppertoolbartitle | chaîne ( Edit Photo par défaut) | Lors de l'image de recadrage, détermine le titre de barre d'outils. |
| CropperCircleOverlay | bool (par défaut false) | Activer ou désactiver le masque de culture circulaire. |
| DisableCroPperColorsetters (Android uniquement) | bool (par défaut false) | Lors de l'image de recadrage, désactive les couleurs pour la bibliothèque de recadrage. |
| minfiles (iOS seulement) | Numéro (par défaut 1) | Min Nombre de fichiers à sélectionner lors de l'utilisation multiple options |
| Maxfiles (iOS seulement) | Numéro (par défaut 5) | Nombre maximum de fichiers à sélectionner lors de l'utilisation multiple options |
| waitanimationend (iOS seulement) | bool (par défaut true) | La promesse résoudra / rejetera une fois que le bloc completion de ViewController sera appelé |
| smartalbums (iOS uniquement) | Array (valeurs prises en charge) (par défaut ['UserLibrary', 'Photosstream', 'Panoramas', 'Videos', 'Bursts']) | Liste des albums intelligents à choisir |
| usefrontcamera | bool (par défaut false) | S'il faut par défaut à l'appareil photo avant / «selfie» lors de l'ouverture. Veuillez noter que tous les appareils Android ne gèrent pas ce paramètre, voir le numéro # 1058 |
| CompressVideOpreset (iOS uniquement) | String (par défaut MediumQuality) | Choisissez quel préréglage sera utilisé pour la compression vidéo |
| compressimagemaxwidth | numéro (non par défaut) | Image de compression avec une largeur maximale |
| compressimagemaxheight | numéro (non par défaut) | Image de compression avec une hauteur maximale |
| compressimagequality | Numéro (par défaut 1 (Android) /0.8 (iOS)) | Image de compression avec qualité (de 0 à 1, où 1 est la meilleure qualité). Sur iOS, les valeurs supérieures à 0,8 ne produisent pas une augmentation de qualité notable dans la plupart des images, tandis qu'une valeur de 0,8 réduira la taille du fichier d'environ la moitié ou moins par rapport à une valeur de 1. |
| ChargeingLabelText (iOS uniquement) | String (par défaut "Actifs de traitement ...") | Texte affiché pendant que la photo se charge dans le cueilleur |
| médias | chaîne (par défaut n'importe quel) | MediaType accepté pour la sélection d'images peut être l'un des: «photo», «vidéo» ou «tout» |
| showSelectedCount (iOS uniquement) | bool (par défaut true) | Il faut afficher le nombre d'actifs sélectionnés |
| Soidorder (iOS uniquement) | String (par défaut «Aucun», Valeurs prises en charge: «ASC», «DESC», «Aucun») | Applique un ordre de tri sur la date de création sur la façon dont les médias sont affichés dans les vues des albums / de détail lors de l'ouverture du sélecteur d'image |
| ForceJPG (iOS uniquement) | bool (par défaut false) | Que ce soit pour convertir des photos en JPG. Cela convertira également n'importe quelle photo en direct en sa représentation JPG |
| showcropguidelines (Android uniquement) | bool (par défaut true) | S'il faut montrer la grille 3x3 sur l'image pendant le recadrage |
| showcropframe (Android uniquement) | bool (par défaut true) | S'il faut montrer un cadre de culture pendant la culture |
| HidebottomControls (Android uniquement) | bool (par défaut false) | S'il faut afficher les commandes inférieures |
| INABLEROTATIONGERDESTURE (Android uniquement) | bool (par défaut false) | Souci de permettre la rotation de l'image à la main geste |
| CropperChooseText (iOS uniquement) | String (par défaut Choisissez) | Choisissez le texte du bouton |
| CropperChooseColor (iOS uniquement) | String (par défaut #FFCC00 ) | Couleur du format hexadécimal pour le bouton Choisir. La couleur par défaut est contrôlée par TOCROPVIEWController. |
| CropperCancelText (iOS uniquement) | String (par défaut Annuler) | Annuler le texte du bouton |
| CroppercancelColor (iOS uniquement) | String (couleur iOS de teinte par défaut) | Couleur du format hexadécimal pour le bouton Annuler. La valeur par défaut est la couleur iOS de teinte par défaut contrôlée par TOCROPVIEWController |
| CropperrotateButtonShidden (iOS uniquement) | bool (par défaut false) | Activer ou désactiver les boutons de rotation de Cropper |
Remarque: Certains de ces types peuvent ne pas être disponibles sur toutes les versions iOS. Assurez-vous de vérifier cela pour éviter les problèmes.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| Propriété | Taper | Description |
|---|---|---|
| chemin | chaîne | Emplacement d'image sélectionné. Ceci est nul lorsque l'option writeTempFile est définie sur False. |
| Local Identifier (iOS uniquement) | chaîne | Aidentificateur local des images sélectionné, utilisé pour la recherche de phasset |
| SourceUrl (iOS uniquement) | chaîne | Chemin de source d'images sélectionnées, n'avez pas d'accès en écriture |
| nom de fichier | chaîne | Nom de fichier d'images sélectionné |
| largeur | nombre | Largeur d'image sélectionnée |
| hauteur | nombre | Hauteur d'image sélectionnée |
| mime | chaîne | Type de mime d'image sélectionné (image / jpeg, image / png) |
| taille | nombre | Taille d'image sélectionnée en octets |
| durée | nombre | Durée vidéo Temps en millisecondes |
| données | base64 | Représentation de fichiers sélectionnés Base64 Facultatif |
| exif | objet | Des données EXIF extraites de l'image. Le format de réponse est spécifique à la plate-forme |
| crroprect | objet | Rectangle d'image recadrée (largeur, hauteur, x, y) |
| Créationdate (iOS uniquement) | chaîne | Timestamp Unix lorsque l'image a été créée |
| ModificationDate | chaîne | Timestamp Unix lorsque l'image a été modifiée pour la dernière fois |
npm i react-native-image-crop-picker --save cd ios
pod install Dans xcode, ouvrez info.plist et ajoutez la clé de chaîne NSPhotoLibraryUsageDescription avec une valeur qui décrit pourquoi vous avez besoin d'accès aux photos utilisateur. Plus d'informations ici https://forums.developer.apple.com/thread/62229. Selon les fonctionnalités que vous utilisez, vous pouvez également avoir besoin de clés NSCameraUsageDescription et NSMicrophoneUsageDescription .
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
Référence pour plus de détails # 1406
Si vous utilisez la version SDK> = 33, ajoutez le suivant à app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [Facultatif] Si vous souhaitez utiliser Camera Picker dans votre projet, ajoutez le suivi à app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/> [Facultatif] Si vous souhaitez utiliser la caméra frontale, ajoutez également le suivi à 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" />Ce projet existe grâce à toutes les personnes qui contribuent. [Contribuer].
Merci à tous nos bailleurs de fonds! [Devenez un bailleur de fonds]
Soutenez ce projet en devenant un sponsor. Votre logo apparaîtra ici avec un lien vers votre site Web. [Devenir sponsor]
Mit
