react-native-image-crop-picker

iOS/Android图片选择器，支持相机、视频、可配置压缩、多图选择和裁剪功能

效果

重要说明

如果您使用的是react-native >= 0.60版本，请使用react-native-image-crop-picker 0.25.0或更高版本。否则请使用0.25.0以下版本。
如果您想使用react-native-image-crop-picker 0.39.0或更高版本，您需要将Android的compileSdkVersion设置为33或更高。否则请使用react-native-image-crop-picker 0.39.0以下版本。

使用方法

导入库

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：已知'cropping'属性可能导致在Android的图库中无法显示视频。选择视频时请不要将cropping设置为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);
});

可选的清理操作

模块会创建临时图片，这些图片将在未来某个时候自动清理。如果您想强制清理，可以使用clean来清理所有临时文件，或使用cleanSingle(path)来清理单个临时文件。

ImagePicker.clean().then(() => {
  console.log('已从临时目录中删除所有临时图片');
}).catch(e => {
  alert(e);
});

请求对象

属性	类型	描述
cropping	布尔值（默认为false）	启用或禁用裁剪
width	数字	与`cropping`选项一起使用时的结果图像宽度
height	数字	与`cropping`选项一起使用时的结果图像高度
multiple	布尔值（默认为false）	启用或禁用多图像选择
writeTempFile（仅iOS）	布尔值（默认为true）	设置为false时，不为选定的图像写入临时文件。当使用`includeBase64`选项检索文件内容且不需要从磁盘读取文件时，这对提高性能很有用。
includeBase64	布尔值（默认为false）	设置为true时，图像文件内容将作为base64编码的字符串在`data`属性中可用。提示：要将此字符串用作图像源，可以这样使用：<Image source={{uri: `data:${image.mime};base64,${image.data}`}} />
includeExif	布尔值（默认为false）	在响应中包含图像的Exif数据
avoidEmptySpaceAroundImage（仅iOS）	布尔值（默认为true）	设置为true时，图像将始终填满遮罩空间。
cropperActiveWidgetColor（仅Android）	字符串（默认为`"#424242"`）	裁剪图像时，确定活动小部件的颜色。
cropperStatusBarColor（仅Android）	字符串（默认为`#424242`）	裁剪图像时，确定状态栏的颜色。
cropperToolbarColor（仅Android）	字符串（默认为`#424242`）	裁剪图像时，确定工具栏的颜色。
cropperToolbarWidgetColor（仅Android）	字符串（默认为`darker orange`）	裁剪图像时，确定工具栏文本和按钮的颜色。
freeStyleCropEnabled	布尔值（默认为false）	允许用户应用自定义矩形区域进行裁剪
cropperToolbarTitle	字符串（默认为`Edit Photo`）	裁剪图像时，确定工具栏的标题。
cropperCircleOverlay	布尔值（默认为false）	启用或禁用圆形裁剪遮罩。
disableCropperColorSetters（仅Android）	布尔值（默认为false）	裁剪图像时，禁用裁剪库的颜色设置器。
minFiles（仅iOS）	数字（默认为1）	使用`multiple`选项时要选择的最小文件数
maxFiles（仅iOS）	数字（默认为5）	使用`multiple`选项时要选择的最大文件数
waitAnimationEnd（仅iOS）	布尔值（默认为true）	Promise将在ViewController `completion`块被调用时解决/拒绝
smartAlbums（仅iOS）	数组（支持的值）（默认为['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']）	可选择的智能相册列表
useFrontCamera	布尔值（默认为false）	打开时是否默认使用前置/"自拍"相机。请注意，并非所有Android设备都支持此参数，详见问题#1058
compressVideoPreset（仅iOS）	字符串（默认为MediumQuality）	选择用于视频压缩的预设
compressImageMaxWidth	数字（默认无）	压缩图像的最大宽度
compressImageMaxHeight	数字（默认无）	压缩图像的最大高度
compressImageQuality	数字（默认Android为1/iOS为0.8）	压缩图像的质量（从0到1，1为最佳质量）。在iOS上，大于0.8的值在大多数图像中不会产生明显的质量提升，而0.8的值与1相比，文件大小将减少约一半或更少。
loadingLabelText（仅iOS）	字符串（默认为"Processing assets..."）	图片在选择器中加载时显示的文本
mediaType	字符串（默认为any）	图像选择接受的媒体类型，可以是：'photo'、'video'或'any'
showsSelectedCount（仅iOS）	布尔值（默认为true）	是否显示选定资产的数量
sortOrder（仅iOS）	字符串（默认为'none'，支持的值：'asc'、'desc'、'none'）	打开图像选择器时，在相册/详细照片视图中显示媒体时应用于创建日期的排序顺序
forceJpg（仅iOS）	布尔值（默认为false）	是否将照片转换为JPG。这也会将任何实况照片转换为其JPG表示形式
showCropGuidelines（仅Android）	布尔值（默认为true）	裁剪时是否在图像上方显示3x3网格
showCropFrame（仅Android）	布尔值（默认为true）	裁剪时是否显示裁剪框
hideBottomControls（仅Android）	布尔值（默认为false）	是否显示底部控件
enableRotationGesture（仅Android）	布尔值（默认为false）	是否启用手势旋转图像
cropperChooseText（仅iOS）	字符串（默认为choose）	选择按钮文本
cropperChooseColor（仅iOS）	字符串（默认为`#FFCC00`）	选择按钮的十六进制格式颜色。默认颜色由TOCropViewController控制。
cropperCancelText（仅iOS）	字符串（默认为Cancel）	取消按钮文本
cropperCancelColor（仅iOS）	字符串（默认为iOS的默认色调）	取消按钮的十六进制格式颜色。默认值是iOS的默认色调颜色由TOCropViewController控制
cropperRotateButtonsHidden（仅iOS）	布尔值（默认为false）	启用或禁用裁剪器旋转按钮

智能相册类型（iOS）

注意：某些类型可能在所有iOS版本上都不可用。请务必检查以避免问题。

['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']

响应对象

属性	类型	描述
path	字符串	选中图片的位置。当`writeTempFile`选项设置为false时，此值为null。
localIdentifier(仅iOS)	字符串	选中图片的本地标识符，用于PHAsset搜索
sourceURL(仅iOS)	字符串	选中图片的源路径，无写入权限
filename(仅iOS)	字符串	选中图片的文件名
width	数字	选中图片的宽度
height	数字	选中图片的高度
mime	字符串	选中图片的MIME类型（image/jpeg, image/png）
size	数字	选中图片的大小（字节）
duration	数字	视频时长（毫秒）
data	base64	可选的base64编码选中文件表示
exif	对象	从图片中提取的EXIF数据。响应格式取决于平台
cropRect	对象	裁剪后的图片矩形（宽度、高度、x、y）
creationDate (仅iOS)	字符串	图片创建时的UNIX时间戳
modificationDate	字符串	图片最后修改时的UNIX时间戳

安装

步骤1

npm i react-native-image-crop-picker --save

步骤2

iOS

cd ios
pod install

步骤3

iOS

步骤1

在Xcode中打开Info.plist，添加字符串键NSPhotoLibraryUsageDescription，其值描述为什么需要访问用户照片。更多信息请参见https://forums.developer.apple.com/thread/62229。根据您使用的功能，您可能还需要`NSCameraUsageDescription`和`NSMicrophoneUsageDescription`键。

（可选）步骤2 - 本地化相机/图库/裁剪器文本按钮

打开您的Xcode项目
通过在导航栏（左侧）打开项目名称进入项目设置
在项目列表中选择您的项目
应该在Info选项卡中，通过"+"添加Localizations中您的应用缺少的语言
重新构建，现在您的应用相机和图库应该有您添加的语言的经典iOS文本。

Android

非常重要 在build.gradle的repositories部分添加以下内容，并将Android SDK版本更改为33。(android/build.gradle)

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        ...
    }
}

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // 添加这个
      maven { url 'https://maven.google.com' }

      // 添加这个
      maven { url "https://www.jitpack.io" }
    }
}

添加useSupportLibrary (android/app/build.gradle)

android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

如果您使用的react-native-image-crop-picker版本 >= 0.35.0，最低Gradle版本要求

3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

如果您使用的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" />

待办事项

[Android] 标准化多选
[Android] 视频压缩

贡献者

本项目的存在要感谢所有做出贡献的人。[参与贡献] <a href="graphs/contributors"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/2a421353-e726-4fa9-8b26-4db24bea96f8.svg?width=890" /></a>

支持者

感谢所有的支持者！🙏 [成为支持者]

赞助商

通过成为赞助商来支持这个项目。您的logo将会显示在这里，并链接到您的网站。[成为赞助商] <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/0/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/88ee8c9f-a5df-42c2-a33b-686b8b82e757.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/1/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/eac20d23-a8e8-46f0-b1df-7edbc3fcae98.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/2/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/2a146995-59e3-48e4-b2cb-1ac03c5d791f.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/3/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/d686c321-b824-428a-8aa2-23f233a82b82.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/4/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/304d9f42-9f7f-445d-9350-828ec0ae3dc9.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/5/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/efbd6fde-e064-4948-948e-1af1803e3ddb.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/6/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/19569e50-25a5-40e3-9a1f-541a6e2ee722.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/7/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/fc6195ba-8219-4824-9254-2f19714e21bb.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/8/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ebd9a620-7d07-4dfa-bb3a-f3a7d92869ac.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/9/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ca75c12e-5a47-487f-b14c-48a001964fb6.svg"></a>