nativereact图片裁剪_GitHubsyanbo/reactnativesyanimagepicker:ReactNative多图片选择支持裁剪压缩...

react-native-syan-image-picker

功能介绍

基于已有原生第三方框架封装的多图片选择组件&＃xff0c;适用于 React Native App。

原生框架依赖

功能特点

支持 iOS、Android 两端

支持单选、多选

可自定义裁剪区域大小&＃xff0c;支持圆形裁剪

可设置压缩质量

可设置是否返回图片 base64 编码

支持记录当前已选中的图片

支持删除指定下标的图片

Live

安装使用

安装

// Step 1 基于 npm

npm install react-native-syan-image-picker --save

// 或是 yarn

yarn add react-native-syan-image-picker

// Step 2 执行 link

react-native link react-native-syan-image-picker

其他配置

iOS

1、添加原生框架中所需的 bundle 文件&＃xff1a;

TARGETS -> Build Phases -> Copy Bundle Resources

点击"&＃43;"按钮&＃xff0c;在弹出的窗口中点击“Add Other”按钮&＃xff0c;选择

node_modules/react-native-syan-image-picker/ios/TZImagePickerController/TZImagePickerController.bundle

2、添加相册相关权限&＃xff1a;

项目目录->Info.plist->增加

Privacy - Camera Usage Description 是否允许此App使用你的相机进行拍照&＃xff1f;

Privacy - Photo Library Usage Description 请允许访问相册以选取照片

Privacy - Photo Library Additions Usage Description 请允许访问相册以选取照片

Privacy - Location When In Use Usage Description 我们需要通过您的地理位置信息获取您周边的相关数据

3、中文适配&＃xff1a;

添加中文 PROJECT -> Info -> Localizations 点击"&＃43;"按钮&＃xff0c;选择Chinese(Simplified)

Android

1、在 AndroidManifest.xml 中添加权限&＃xff1a;

2、更新到 PictureSelector需要修改minSdkVersion&＃xff1a;

// app/build.gradle

android {

minSdkVersion &＃61; 19

...

}

3、拍照前动态获取权限

requestPermission &＃61; async () &＃61;> {

try {

const granted &＃61; await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,

{

title: &＃39;申请读写手机存储权限&＃39;,

message:

&＃39;一个很牛逼的应用想借用你的摄像头&＃xff0c;&＃39; &＃43;

&＃39;然后你就可以拍出酷炫的皂片啦。&＃39;,

buttonNeutral: &＃39;等会再问我&＃39;,

buttonNegative: &＃39;不行&＃39;,

buttonPositive: &＃39;好吧&＃39;,

},

);

if (granted &＃61;&＃61;&＃61; PermissionsAndroid.RESULTS.GRANTED) {

console.log(&＃39;现在你获得摄像头权限了&＃39;);

} else {

console.log(&＃39;用户并不给你&＃39;);

}

} catch (err) {

console.warn(err);

}

};

4、同时使用 fast-image 需要使用glide 版本

在build.gradle的buildscript&＃xff0c;ext下新增glideVersion指定和fast-image一样的版本

新增 pictureVersion 自定义picture_library版本

注意安装运行报错

检查自动 link 是否成功

使用 Android Studio 查看 MainApplication.java 文件是否添加 new RNSyanImagePickerPackage()

使用 Android Studio 打开项目检查 Gradle 是否同步完成

可以运行 ImagePickerExample 该 Demo&＃xff0c;测试 Android 7.0&＃xff0c;6.0 拍照选图都为正常

link失败手动添加

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project&＃39;s name]

Go to node_modules ➜ react-native-syan-image-picker and add RNSyanImagePicker.xcodeproj

In XCode, in the project navigator, select your project. Add libRNSyanImagePicker.a to your project&＃39;s Build Phases ➜ Link Binary With Libraries

Run your project (Cmd&＃43;R)<

Android

Open up android/app/src/main/java/[...]/MainApplication.java

Add import com.reactlibrary.RNSyanImagePickerPackage; to the imports at the top of the file

Add new RNSyanImagePickerPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include &＃39;:react-native-syan-image-picker&＃39;

project(&＃39;:react-native-syan-image-picker&＃39;).projectDir &＃61; new File(rootProject.projectDir, &＃39;../node_modules/react-native-syan-image-picker/android&＃39;)

Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(&＃39;:react-native-syan-image-picker&＃39;)

运行示例

配置参数说明

组件调用时&＃xff0c;支持传入一个 options 对象&＃xff0c;可设置的属性如下&＃xff1a;

属性名

类型

是否可选

默认值

描述

imageCount

int

是

6

最大选择图片数目

isRecordSelected

bool

是

false

记录当前已选中的图片

isCamera

bool

是

true

是否允许用户在内部拍照

isCrop

bool

是

false

是否允许裁剪&＃xff0c;imageCount 为1才生效

CropW

int

是

screenW * 0.6

裁剪宽度&＃xff0c;默认屏幕宽度60%

CropH

int

是

screenW * 0.6

裁剪高度&＃xff0c;默认屏幕宽度60%

isGif

bool

是

false

是否允许选择GIF&＃xff0c;暂无回调GIF数据

showCropCircle

bool

是

false

是否显示圆形裁剪区域

circleCropRadius

float

是

screenW * 0.5

圆形裁剪半径&＃xff0c;默认屏幕宽度一半

showCropFrame

bool

是

true

是否显示裁剪区域

showCropGrid

bool

是

false

是否隐藏裁剪区域网格

quality

int

是

90

压缩质量(安卓无效&＃xff0c;固定鲁班压缩)

minimumCompressSize

int

是

100

小于100kb的图片不压缩(Android)

enableBase64

bool

是

false

是否返回base64编码&＃xff0c;默认不返回

freeStyleCropEnabled

bool

是

false

裁剪框是否可拖拽(Android)

rotateEnabled

bool

是

true

裁剪是否可旋转图片(Android)

scaleEnabled

bool

是

true

裁剪是否可放大缩小图片(Android)

showSelectedIndex

bool

是

false

是否显示序号

返回结果说明

以 Callback 形式调用时&＃xff0c;返回的第一个参数为错误对象&＃xff0c;第二个才是图片数组&＃xff1a;

属性名

类型

描述

error

object

取消拍照时不为 null&＃xff0c;此时 error.message &＃61;&＃61; &＃39;取消&＃39;

photos

array

选择的图片数组

而以 Promise 形式调用时&＃xff0c;则直接返回图片数组&＃xff0c;在 catch 中去处理取消选择的情况。

下面是每张图片对象所包含的属性&＃xff1a;

属性名

类型

描述

width

int

图片宽度

height

int

图片高度

uri

string

图片路径

original_uri

string

图片原始路径&＃xff0c;仅 Android

type

string

文件类型&＃xff0c;仅 Android&＃xff0c;当前只返回 image

size

int

图片大小&＃xff0c;单位为字节 b

base64

string

图片的 base64 编码&＃xff0c;如果 enableBase64 设置 false&＃xff0c;则不返回该属性

方法调用

Callback

回调形式需调用 showImagePicker 方法&＃xff1a;

import SyanImagePicker from &＃39;react-native-syan-image-picker&＃39;;

SyanImagePicker.showImagePicker(options, (err, selectedPhotos) &＃61;> {

if (err) {

// 取消选择

return;

}

// 选择成功&＃xff0c;渲染图片

// ...

})

Promise

非回调形式则使用 asyncShowImagePicker 方法&＃xff1a;

import SyanImagePicker from &＃39;react-native-syan-image-picker&＃39;;

// promise-then

SYImagePicker.asyncShowImagePicker(options)

.then(photos &＃61;> {

// 选择成功

})

.catch(err &＃61;> {

// 取消选择&＃xff0c;err.message为"取消"

})

// async/await

handleSelectPhoto &＃61; async () &＃61;> {

try {

const photos &＃61; await SYImagePicker.asyncShowImagePicker(options);

// 选择成功

} catch (err) {

// 取消选择&＃xff0c;err.message为"取消"

}

}

移除选中图片

在 React Native 页面移除选中的图片后&＃xff0c;需调用 removePhotoAtIndex 方法&＃xff0c;来删除原生中保存的图片数组&＃xff0c;确保下次进入图片选择时&＃xff0c;已选中的图片保持一致&＃xff1a;

handleDeletePhoto &＃61; index &＃61;> {

const { selectedPhotos: oldPhotos } &＃61; this.state;

const selectedPhotos &＃61; oldPhotos.filter((photo, photoIndex) &＃61;> photoIndex !&＃61;&＃61; index);

// 更新原生图片数组

SYImagePicker.removePhotoAtIndex(index);

// 更新 RN 页面

this.setState({ selectedPhotos });

}

移除全部选中图片

STImagePicke.removeAllPhoto()

调用相机

相机功能调用方法&＃xff0c;一样支持 Callback 和 Promise 两种形式&＃xff0c;结果参数也保持一致。

//Callback方式

SyanImagePicker.openCamera(options, (err, photos) &＃61;> {

if (err) {

// 取消选择

return;

}

// 选择成功&＃xff0c;渲染图片

// ...

})

//Promise方式

SYImagePicker.asyncOpenCamera(options)

.then(()&＃61;>{

...

})

.catch(()&＃61;>{

...

})

选择视频

SyanImagePicker.openVideoPicker(options, (err, videos) &＃61;> {

if (err) {

// 取消选择

return;

}

// 选择成功&＃xff0c;处理视频

// ...

})

options 可选配置&＃xff1a;

{

MaxSecond: 60,

MinSecond: 0,

recordVideoSecond: 60,

videoCount: 1

}

返回结果&＃xff1a;

type

value

iOS

Android

uri

string

✅

✅

fileName

string

✅

✅

size

string

✅

✅

duration

number

✅

✅

width

number

✅

✅

height

number

✅

✅

type

string

✅

✅

mime

string

✅

✅

coverUri

string

✅

✅

favorite

string

✅

❌

mediaType

string

✅

❌

Android 返回结果&＃xff1a;

{

mime: "video/mp4",

type: "video",

height: 1080,

width: 1920,

duration: 30.22,

size: 63876724,

fileName: "VID_20200409_11492864.mp4",

uri: "file:///storage/emulated/0/DCIM/Camera/VID_20200409_11492864.mp4",

coverUri: "file:///storage/emulated/0/Android/data/package_id/cache/thumb-c3c99b6a.jpg"

}

注&＃xff1a;uri 包含协议 "file://"

删除缓存

SYImagePicker.deleteCache();

版本记录

0.4.10 新增showSelectedIndex参数&＃xff0c;是否显示选中序号

帮助

加入 React-Native QQ群 397885169

非常感谢

捐赠

随时欢迎&＃xff01;&＃xff01;☕️☕️☕️✨✨