react native image crop picker
v0.41.5
Picker de imagem iOS/Android com suporte para câmera, vídeo, compressão configurável, várias imagens e corte
Biblioteca de importação
import ImagePicker from 'react-native-image-crop-picker' ;Ligue para o seletor de imagem única com corte
ImagePicker . openPicker ( {
width : 300 ,
height : 400 ,
cropping : true
} ) . then ( image => {
console . log ( image ) ;
} ) ;Ligue para o seletor de imagens múltiplas
ImagePicker . openPicker ( {
multiple : true
} ) . then ( images => {
console . log ( images ) ;
} ) ;Selecione Vídeo apenas na Galeria
ImagePicker . openPicker ( {
mediaType : "video" ,
} ) . then ( ( video ) => {
console . log ( video ) ;
} ) ;Android: o 'Cropping' é conhecido por fazer com que os vídeos não sejam exibidos na galeria no Android. Por favor, não defina o corte como verdadeiro ao selecionar vídeos.
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 ) ;
} ) ; O módulo está criando imagens TMP que serão limpas automaticamente em algum lugar no futuro. Se você deseja forçar a limpeza, pode usar clean para limpar todos os arquivos TMP ou cleanSingle(path) para limpar o arquivo TMP único.
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| Propriedade | Tipo | Descrição |
|---|---|---|
| cortando | bool (padrão false) | Habilitar ou desativar o cultivo |
| largura | número | Largura da imagem do resultado quando usado com a opção cropping |
| altura | número | Altura da imagem do resultado quando usado com a opção cropping |
| múltiplo | bool (padrão false) | Ativar ou desativar a seleção de imagens múltiplas |
| WritETempFile (apenas iOS) | bool (padrão true) | Quando definido como false, não escreve arquivos temporários para as imagens selecionadas. Isso é útil para melhorar o desempenho quando você está recuperando o conteúdo do arquivo com a opção includeBase64 e não precisa ler arquivos do disco. |
| incluirbase64 | bool (padrão false) | Quando definido como true, o conteúdo do arquivo de imagem estará disponível como uma string codificada por Base64 na propriedade data . Dica: para usar esta string como fonte de imagem, use -a como: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| incluindoexif | bool (padrão false) | Inclua dados de imagens exif na resposta |
| EVEVEMENTYSPACEAROUNDIMAGE (apenas iOS) | bool (padrão true) | Quando definido como true, a imagem sempre preencherá o espaço da máscara. |
| CropPeractiveWidgetColor (apenas Android) | String (padrão "#424242" ) | Ao cortar a imagem, determina a cor do ActiveWidget. |
| CropPerstatusBarcolor (apenas Android) | String (padrão #424242 ) | Ao cortar a imagem, determina a cor do statusbar. |
| CropPerToolBarcolor (apenas Android) | String (padrão #424242 ) | Ao cortar a imagem, determina a cor da barra de ferramentas. |
| CropPerToolbarWidgetColor (apenas Android) | String (padrão darker orange ) | Ao cortar a imagem, determina a cor do texto e dos botões da barra de ferramentas. |
| FreestyleCropeNabled | bool (padrão false) | Permite que o usuário aplique uma área de retângulo personalizada para corte |
| CRUPPERTOOLBARTITLE | String ( Edit Photo padrão) | Ao cortar a imagem, determina o título da barra de ferramentas. |
| CropPercircleoverlay | bool (padrão false) | Habilite ou desative a máscara de cultivo circular. |
| DisableCropperColorsetters (somente Android) | bool (padrão false) | Ao cortar a imagem, desativa os setters de cores para o corte da biblioteca. |
| Minfiles (somente iOS) | Número (padrão 1) | Número min de arquivos a serem selecionados ao usar multiple opções |
| Maxfiles (somente iOS) | Número (padrão 5) | Número máximo de arquivos a serem selecionados ao usar multiple opções |
| Waitanimationend (somente iOS) | bool (padrão true) | A promessa resolverá/rejeitará quando o bloco completion do ViewController for chamado |
| Smartalbums (somente iOS) | Array (valores suportados) (padrão ['UserLibrary', 'Photostream', 'Panoramas', 'Videos', 'Bursts'])) | Lista de álbuns inteligentes para escolher |
| usefrontcamera | bool (padrão false) | Se deve padrão para a câmera frontal/'selfie' quando aberto. Observe que nem todos os dispositivos Android lidam com este parâmetro, consulte a edição #1058 |
| Compressvideopreset (somente iOS) | String (média padrão) | Escolha qual predefinição será usada para compactação de vídeo |
| CompressimageMaxWidth | número (padrão nenhum) | Compressa imagem com largura máxima |
| CompressimageMaxHeight | número (padrão nenhum) | Comprime a imagem com altura máxima |
| CompressImagequality | Número (padrão 1 (Android) /0.8 (iOS)) | Compressa a imagem com qualidade (de 0 a 1, onde 1 é a melhor qualidade). No iOS, os valores maiores que 0,8 não produzem um aumento notável de qualidade na maioria das imagens, enquanto um valor de 0,8 reduzirá o tamanho do arquivo em cerca de metade ou menos em comparação com um valor de 1. |
| LoadingLabelText (somente iOS) | String (padrão "Processando Ativos ...") | Texto exibido enquanto a foto está carregando no seletor |
| MediaType | string (padrão qualquer) | Aceito MediaType para seleção de imagens, pode ser um dos: 'foto', 'vídeo' ou 'qualquer' |
| ShowsSelectedCount (somente iOS) | bool (padrão true) | Se deve mostrar o número de ativos selecionados |
| Sortorder (somente iOS) | String (padrão 'nenhum', valores suportados: 'asc', 'desc', 'nenhum') | Aplica uma ordem de classificação na data da criação sobre como a mídia é exibida dentro das visualizações de fotografias/detalhes ao abrir o seletor de imagem |
| forcejpg (somente iOS) | bool (padrão false) | Se deve converter fotos em jpg. Isso também converterá qualquer foto ao vivo em sua representação JPG |
| ShowCropGuidelines (somente Android) | bool (padrão true) | Se deve mostrar a grade 3x3 em cima da imagem durante o corte |
| ShowCropFrame (apenas Android) | bool (padrão true) | Se deve mostrar a estrutura da colheita durante o cultivo |
| HidebottomControls (somente Android) | bool (padrão false) | Se deve exibir controles inferiores |
| EnableroTationGesture (apenas Android) | bool (padrão false) | Se deve ativar a rotação da imagem pelo gesto manual |
| CropPerchooseText (somente iOS) | String (padrão Escolha) | Escolha o texto do botão |
| Cropperchooosecolor (apenas iOS) | String (padrão #FFCC00 ) | Formato hexadecimal da cor para o botão Escolha. A cor padrão é controlada pelo ToCropViewController. |
| CropPerCancelText (somente iOS) | String (cancelamento padrão) | Cancelar texto do botão |
| CropPercancelColor (apenas iOS) | String (cor iOS padrão) | Formato hexadecimal de cor para o botão cancelar. Valor padrão é a cor IOS padrão controlada por ToCropViewController |
| CropPerrotateButtonShidden (somente iOS) | bool (padrão false) | Ativar ou desativar os botões de rotação do Cropper |
Nota: Alguns desses tipos podem não estar disponíveis em todas as versões do iOS. Certifique -se de verificar isso para evitar problemas.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| Propriedade | Tipo | Descrição |
|---|---|---|
| caminho | corda | Localização da imagem selecionada. Isso é nulo quando a opção writeTempFile é definida como falsa. |
| LocalIdentifier (somente iOS) | corda | LocalIdentifier da Selected Images, usado para pesquisa de phasset |
| Sourceurl (apenas iOS) | corda | Caminho de origem das imagens selecionadas, não tenha acesso de gravação |
| nome do arquivo | corda | Nome do arquivo de imagens selecionadas |
| largura | número | Largura da imagem selecionada |
| altura | número | Altura da imagem selecionada |
| MIME | corda | Tipo MIME de imagem selecionada (imagem/jpeg, imagem/png) |
| tamanho | número | Tamanho da imagem selecionado em bytes |
| duração | número | Tempo de duração do vídeo em milissegundos |
| dados | base64 | Representação opcional de arquivo Base64 Selecionado |
| exif | objeto | Dados exiF extraídos da imagem. O formato de resposta é específico da plataforma |
| croprett | objeto | Retângulo de imagem cortada (largura, altura, x, y) |
| CreationDate (somente iOS) | corda | Timestamp unix quando a imagem foi criada |
| ModificationDate | corda | Timestamp unix quando a imagem foi modificada pela última vez |
npm i react-native-image-crop-picker --save cd ios
pod install No Xcode Open Info.plist e adicione a tecla String NSPhotoLibraryUsageDescription com valor que descreve por que você precisa de acesso às fotos do usuário. Mais informações aqui https://forums.developer.apple.com/thread/62229. Dependendo dos recursos que você usa, você também pode precisar das teclas NSCameraUsageDescription e NSMicrophoneUsageDescription .
build.gradle e altere a versão Android SDK para 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
Referência para mais detalhes #1406
Se você usar a versão SDK> = 33, adicione seguidores ao app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [Opcional] Se você deseja usar o seletor de câmera em seu projeto, adicione o seguinte ao app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/> [Opcional] Se você deseja usar a câmera frontal, também adicione o seguinte ao 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" />Este projeto existe graças a todas as pessoas que contribuem. [Contribuir].
Obrigado a todos os nossos apoiadores! [Torne -se um patrocinador]
Apoie este projeto, tornando -se um patrocinador. Seu logotipo aparecerá aqui com um link para o seu site. [Torne -se um patrocinador]
Mit
