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" />
由于所有贡献的人,该项目的存在。 [贡献]。
感谢我们所有的支持者! [成为支持者]
通过成为赞助商来支持这个项目。您的徽标将在此处显示您网站的链接。 [成为赞助商]
麻省理工学院