@tuofeng/react-native-image-picker
Version:
Image Picker
195 lines (187 loc) • 16.7 kB
JavaScript
import { NativeModules, Platform, ActionSheetIOS } from 'react-native'
const UIImagePickerManager = NativeModules.ImagePickerManager
const ImagePickerManager = NativeModules.TFImagePickerManager
export default class ImagePicker {
// 拍照选择图片
static launchCamera(option, cb) {
// 参数设置
const options = {
quality: typeof option.quality !== 'undefined' ? option.quality : 1.0, // 照片压缩率，按照像素压缩 ios&android
maxWidth: typeof option.maxWidth !== 'undefined' ? option.maxWidth : 180, // 最大尺寸宽度 ios&android
maxHeight: typeof option.maxHeight !== 'undefined' ? option.maxHeight : 180, // 最大尺寸高度 ios&android
isCrop: typeof option.isCrop !== 'undefined' ? option.isCrop : true, // 是否裁剪
allowsEditing: typeof option.allowsEditing !== 'undefined' ? option.allowsEditing : false, // 是否允许系统编辑 ios
saveAlbum: typeof option.saveAlbum !== 'undefined' ? option.saveAlbum : false, // 是否允许保存到系统相册 ios
imageFileType: typeof option.imageFileType !== 'undefined' ? option.imageFileType : 'png', // 指定图片的保存本地类型 ios
customCamera: option.customCamera,
storageOptions: typeof option.storageOptions !== 'undefined' ? { // 存储的设置项 ios&android
skipBackup: typeof option.storageOptions.skipBackup !== 'undefined' ? option.storageOptions.skipBackup : true, // 默认true表示跳过备份到iCloud和iTunes,一般应用中不包含用户的数据的文件无须备份 ios
path: typeof option.storageOptions.path !== 'undefined' ? option.storageOptions.path : 'savePhotoPath', // 创建存储的文件夹路径，图片保存在沙盒caches下的文件夹名称 ios&android
} : { // 存储的设置项 ios&android
skipBackup: true, // 默认true表示跳过备份到iCloud和iTunes,一般应用中不包含用户的数据的文件无须备份 ios
path: 'savePhotoPath', // 创建存储的文件夹路径，图片保存在沙盒caches下的文件夹名称 ios&android
},
cropOptions: typeof option.cropOptions !== 'undefined' ? { // 裁剪项设置 ios
showMidLines: typeof option.cropOptions.showMidLines !== 'undefined' ? option.cropOptions.showMidLines : true, // 是否显示中间的拖拽 ios
cropAreaCornerWidth: typeof option.cropOptions.cropAreaCornerWidth !== 'undefined' ? option.cropOptions.cropAreaCornerWidth : 20, // 设置角拖拽区的宽度 ios
cropAreaCornerHeight: typeof option.cropOptions.cropAreaCornerHeight !== 'undefined' ? option.cropOptions.cropAreaCornerHeight : 20, // 设置角拖拽区的高度 ios
cropAreaCornerLineWidth: typeof option.cropOptions.cropAreaCornerLineWidth !== 'undefined' ? option.cropOptions.cropAreaCornerLineWidth : 2, // 设置角框的宽度 ios
cropAreaBorderLineWidth: typeof option.cropOptions.cropAreaBorderLineWidth !== 'undefined' ? option.cropOptions.cropAreaBorderLineWidth : 2, // 设置选取框的宽度 ios
cropAreaMidLineWidth: typeof option.cropOptions.cropAreaMidLineWidth !== 'undefined' ? option.cropOptions.cropAreaMidLineWidth : 40, // 设置中间拖拽区的宽度 ios
cropAreaMidLineHeight: typeof option.cropOptions.cropAreaMidLineHeight !== 'undefined' ? option.cropOptions.cropAreaMidLineHeight : 2, // 设置中间拖拽区的高度 ios
minSpace: typeof option.cropOptions.minSpace !== 'undefined' ? option.minSpace : 10, // 设置选取区的最小尺寸，最小区域 ios
cropAreaBorderLineColor: typeof option.cropOptions.cropAreaBorderLineColor !== 'undefined' ? option.cropOptions.cropAreaBorderLineColor : '#808080', // 选取区域边框框的颜色, 默认灰色 ios
cropAreaCornerLineColor: typeof option.cropOptions.cropAreaCornerLineColor !== 'undefined' ? option.cropOptions.cropAreaCornerLineColor : '#FFFFFF', // 设置角拖拽视图的颜色， 默认白色 ios
cropAreaMidLineColor: typeof option.cropOptions.cropAreaMidLineColor !== 'undefined' ? option.cropOptions.cropAreaMidLineColor : '#FFFFFF', // 设置中间拖拽视图的颜色, 默认白色 ios
} : { // 裁剪项设置 ios
showMidLines: true, // 是否显示中间的拖拽 ios
cropAreaCornerWidth: 20, // 设置角拖拽区的宽度 ios
cropAreaCornerHeight: 20, // 设置角拖拽区的高度 ios
cropAreaCornerLineWidth: 2, // 设置角框的宽度 ios
cropAreaBorderLineWidth: 2, // 设置选取框的宽度 ios
cropAreaMidLineWidth: 40, // 设置中间拖拽区的宽度 ios
cropAreaMidLineHeight: 2, // 设置中间拖拽区的高度 ios
minSpace: 10, // 设置选取区的最小尺寸，最小区域 ios
cropAreaBorderLineColor: '#808080', // 选取区域边框框的颜色, 默认灰色 ios
cropAreaCornerLineColor: '#FFFFFF', // 设置角拖拽视图的颜色， 默认白色 ios
cropAreaMidLineColor: '#FFFFFF', // 设置中间拖拽视图的颜色, 默认白色 ios
},
}
if (Platform.OS === 'ios') {
ImagePickerManager.phoneFromCamera(options, cb)
} else {
UIImagePickerManager.launchCamera(options, cb)
}
}
// 图库选择图片
static showImagePicker(option, cb) {
const options = {
showCamera: typeof option.showCamera !== 'undefined' ? option.showCamera : true, // 是否显示照相机
maxNumOfSelect: typeof option.maxNumOfSelect !== 'undefined' ? option.maxNumOfSelect : 1, // 照片最大选取数 ios&android
quality: typeof option.quality !== 'undefined' ? option.quality : 1, // 照片压缩率，按照像素压缩 ios&android
maxWidth: typeof option.maxWidth !== 'undefined' ? option.maxWidth : 180, // 最大尺寸宽度 ios&android
maxHeight: typeof option.maxHeight !== 'undefined' ? option.maxHeight : 180, // 最大尺寸高度 ios&android
listNavigationBarOptions: typeof option.listNavigationBarOptions !== 'undefined' ? { // 缩略图页面，上导航条的设置项 ios&android
buttonColor: typeof option.listNavigationBarOptions.buttonColor !== 'undefined' ? option.listNavigationBarOptions.buttonColor : '#22a563', // 完成按钮的背景颜色 android
indicatorColor: typeof option.listNavigationBarOptions.indicatorColor !== 'undefined' ? option.listNavigationBarOptions.indicatorColor : '#22a563', // 数字指示器的背景颜色 android
backgroundColor: typeof option.listNavigationBarOptions.backgroundColor !== 'undefined' ? option.listNavigationBarOptions.backgroundColor : '#22a563', // 上导航栏的背景颜色，默认为纯黑色 ios&android
titleColor: typeof option.listNavigationBarOptions.titleColor !== 'undefined' ? option.listNavigationBarOptions.titleColor : '#FFFFFF', // 设置上导航栏上的字体的颜色，默认是纯白色 ios&android
borderColor: typeof option.listNavigationBarOptions.borderColor !== 'undefined' ? option.listNavigationBarOptions.borderColor : '#6fd09f', // 设置完成按钮边框颜色 android
alpha: typeof option.listNavigationBarOptions.alpha !== 'undefined' ? option.listNavigationBarOptions.alpha : 0.8, // 设置上导航视图的透明度，默认为0.8 ios
} : {
buttonColor: '#22a563', // 完成按钮的背景颜色 android
indicatorColor: '#22a563', // 数字指示器的背景颜色 android
backgroundColor: '#22a563', // 上导航栏的背景颜色，默认为纯黑色 ios&android
titleColor: '#FFFFFF', // 设置上导航栏上的字体的颜色，默认是纯白色 ios&android
borderColor: '#6fd09f', // 设置完成按钮边框颜色 android
alpha: 0.8, // 设置上导航视图的透明度，默认为0.8 ios
},
storageOptions: typeof option.storageOptions !== 'undefined' ? { // 存储的设置项 ios&android
path: typeof option.storageOptions.path !== 'undefined' ? option.storageOptions.path : 'savePhotoPath', // 创建存储的文件夹路径，/内存卡/Android/data/packageName/savePhotoPath ios&android
skipBackup: typeof option.storageOptions.skipBackup !== 'undefined' ? option.storageOptions.skipBackup : true, // 默认true表示跳过备份到iCloud和iTunes,一般应用中不包含用户的数据的文件无须备份 ios
} : { // 存储的设置项 ios&android
path: 'savePhotoPath', // 创建存储的文件夹路径，/内存卡/Android/data/packageName/savePhotoPath ios&android
skipBackup: true, // 默认true表示跳过备份到iCloud和iTunes,一般应用中不包含用户的数据的文件无须备份 ios
},
isCrop: typeof option.isCrop !== 'undefined' ? option.isCrop : true, // 是否裁剪
listFinishBarOptions: typeof option.listFinishBarOptions !== 'undefined' ? { // 缩略图页面，完成状态栏设置项 ios
backgroundColor: typeof option.listFinishBarOptions.backgroundColor !== 'undefined' ? option.listFinishBarOptions.backgroundColor : '#FAFAFA', // 完成状态栏背景颜色，默认浅灰色 ios
tintColor: typeof option.listFinishBarOptions.tintColor !== 'undefined' ? option.listFinishBarOptions.tintColor : '#09bb07', // 状态栏上完成按钮和文本框背景颜色， 默认纯绿色 ios
titleColor: typeof option.listFinishBarOptions.titleColor !== 'undefined' ? option.listFinishBarOptions.titleColor : '#FFFFFF', // 显示选择个数的文本颜色，默认纯白色 ios
splitLineColor: typeof option.listFinishBarOptions.splitLineColor !== 'undefined' ? option.listFinishBarOptions.splitLineColor : '#bfbfbf', // 状态栏上分割线颜色 ios
splitLineHeight: typeof option.listFinishBarOptions.splitLineHeight !== 'undefined' ? option.listFinishBarOptions.splitLineHeight : 1, // 分割线的高度，默认1个像素 ios
} : {
backgroundColor: '#FAFAFA', // 完成状态栏背景颜色，默认浅灰色 ios
tintColor: '#09bb07', // 状态栏上完成按钮和文本框背景颜色， 默认纯绿色 ios
titleColor: '#FFFFFF', // 显示选择个数的文本颜色，默认纯白色 ios
splitLineColor: '#bfbfbf', // 状态栏上分割线颜色 ios
splitLineHeight: 1, // 分割线的高度，默认1个像素 ios
},
bigNavigationBarOptions: typeof option.bigNavigationBarOptions !== 'undefined' ? { // 大图页面，上导航条设置项 ios
backgroundColor: typeof option.bigNavigationBarOptions.backgroundColor !== 'undefined' ? option.bigNavigationBarOptions.backgroundColor : '#000000', // 上导航栏的背景颜色，默认为纯黑色 ios
alpha: typeof option.bigNavigationBarOptions.alpha !== 'undefined' ? option.bigNavigationBarOptions.alpha : 0.5, // 设置上导航视图的透明度，默认为0.5 ios
} : {
backgroundColor: '#000000', // 上导航栏的背景颜色，默认为纯黑色 ios
alpha: 0.5, // 设置上导航视图的透明度，默认为0.5 ios
},
bigFinishBarOptions: typeof option.bigFinishBarOptions !== 'undefined' ? { // 大图页面，完成状态栏设置项 ios
backgroundColor: typeof option.bigFinishBarOptions.backgroundColor !== 'undefined' ? option.bigFinishBarOptions.backgroundColor : '#000000', // 完成状态栏背景颜色，默认为纯黑色 ios
alpha: typeof option.bigFinishBarOptions.alpha !== 'undefined' ? option.bigFinishBarOptions.alpha : 0.5, // 设置状态栏的透明度，默认为0.5 ios
tintColor: typeof option.bigFinishBarOptions.tintColor !== 'undefined' ? option.bigFinishBarOptions.tintColor : '#008000', // 状态栏上完成按钮和文本框背景颜色， 默认纯绿色 ios
titleColor: typeof option.bigFinishBarOptions.titleColor !== 'undefined' ? option.bigFinishBarOptions.titleColor : '#FFFFFF', // 显示选择个数的文本颜色，默认纯白色 ios
} : { // 大图页面，完成状态栏设置项 ios
backgroundColor: '#000000', // 完成状态栏背景颜色，默认为纯黑色 ios
alpha: 0.5, // 设置状态栏的透明度，默认为0.5 ios
tintColor: '#008000', // 状态栏上完成按钮和文本框背景颜色， 默认纯绿色 ios
titleColor: '#FFFFFF', // 显示选择个数的文本颜色，默认纯白色 ios
},
cropOptions: typeof option.cropOptions !== 'undefined' ? { // 裁剪项设置 ios
showMidLines: typeof option.cropOptions.showMidLines !== 'undefined' ? option.cropOptions.showMidLines : true, // 是否显示中间的拖拽 ios
cropAreaCornerWidth: typeof option.cropOptions.cropAreaCornerWidth !== 'undefined' ? option.cropOptions.cropAreaCornerWidth : 20, // 设置角拖拽区的宽度 ios
cropAreaCornerHeight: typeof option.cropOptions.cropAreaCornerHeight !== 'undefined' ? option.cropOptions.cropAreaCornerHeight : 20, // 设置角拖拽区的高度 ios
cropAreaCornerLineWidth: typeof option.cropOptions.cropAreaCornerLineWidth !== 'undefined' ? option.cropOptions.cropAreaCornerLineWidth : 2, // 设置角框的宽度 ios
cropAreaBorderLineWidth: typeof option.cropOptions.cropAreaBorderLineWidth !== 'undefined' ? option.cropOptions.cropAreaBorderLineWidth : 2, // 设置选取框的宽度 ios
cropAreaMidLineWidth: typeof option.cropOptions.cropAreaMidLineWidth !== 'undefined' ? option.cropOptions.cropAreaMidLineWidth : 40, // 设置中间拖拽区的宽度 ios
cropAreaMidLineHeight: typeof option.cropOptions.cropAreaMidLineHeight !== 'undefined' ? option.cropOptions.cropAreaMidLineHeight : 2, // 设置中间拖拽区的高度 ios
minSpace: typeof option.cropOptions.minSpace !== 'undefined' ? option.cropOptions.minSpace : 10, // 设置选取区的最小尺寸，最小区域 ios
cropAreaBorderLineColor: typeof option.cropOptions.cropAreaBorderLineColor !== 'undefined' ? option.cropOptions.cropAreaBorderLineColor : '#808080', // 选取区域边框框的颜色, 默认灰色 ios
cropAreaCornerLineColor: typeof option.cropOptions.cropAreaCornerLineColor !== 'undefined' ? option.cropOptions.cropAreaCornerLineColor : '#FFFFFF', // 设置角拖拽视图的颜色， 默认白色 ios
cropAreaMidLineColor: typeof option.cropOptions.cropAreaMidLineColor !== 'undefined' ? option.cropOptions.cropAreaMidLineColor : '#FFFFFF', // 设置中间拖拽视图的颜色, 默认白色 ios
} : { // 裁剪项设置 ios
showMidLines: true, // 是否显示中间的拖拽 ios
cropAreaCornerWidth: 20, // 设置角拖拽区的宽度 ios
cropAreaCornerHeight: 20, // 设置角拖拽区的高度 ios
cropAreaCornerLineWidth: 2, // 设置角框的宽度 ios
cropAreaBorderLineWidth: 2, // 设置选取框的宽度 ios
cropAreaMidLineWidth: 40, // 设置中间拖拽区的宽度 ios
cropAreaMidLineHeight: 2, // 设置中间拖拽区的高度 ios
minSpace: 10, // 设置选取区的最小尺寸，最小区域 ios
cropAreaBorderLineColor: '#808080', // 选取区域边框框的颜色, 默认灰色 ios
cropAreaCornerLineColor: '#FFFFFF', // 设置角拖拽视图的颜色， 默认白色 ios
cropAreaMidLineColor: '#FFFFFF', // 设置中间拖拽视图的颜色, 默认白色 ios
},
}
if (Platform.OS === 'ios') {
ImagePickerManager.showImagePicker(options, cb)
} else {
UIImagePickerManager.selectImage(options, cb)
}
}
// 用户选择框
static userSelect(cb) {
if (Platform.OS === 'ios') {
this.alertIOS(cb)
} else {
this.alertAndroid(cb)
}
}
// 用户选择框 ios
static alertIOS(cb) {
ActionSheetIOS.showActionSheetWithOptions({
options: ['拍照', '从手机相册选取', '取消'],
cancelButtonIndex: 2,
}, (index) => {
cb(index)
})
}
// 用户选择框 android
static alertAndroid(cb) {
UIImagePickerManager.showImagePicker('添加照片', '取消', ['拍照', '从手机相册选择'], (response) => {
cb(response.which)
})
}
static cutImage(imagePath, react, callBack) {
if (Platform.OS === 'ios') {
ImagePickerManager.cutImageFromImage(imagePath, react, callBack)
} else {
UIImagePickerManager.cutImageFromImage(imagePath, react, callBack)
}
}
static zoomImage(imagePath, size, callBack) {
if (Platform.OS === 'ios') {
ImagePickerManager.zoomImage(imagePath, size, callBack)
} else {
UIImagePickerManager.zoomImage(imagePath, size, callBack)
}
}
}