@tuofeng/react-native-image-picker

v0.0.51

Published

3 years ago

Image Picker

Downloads

0High
0Medium
0Low

iwater

react-native react-native-image-picker react native image picker

react-native-android-image-picker

Android照片选取器，支持多张照片选取（支持选择图片的时候拍照），支持直接启动拍照。用户可以方便的看到选择顺序 1、结果演示

截图

动画演示

2、文件夹说明

Android文件夹，存放的是多图选择器的Android端代码
- 注：根据产品需求可以对/Android/src/main/res/drawable-xxhdpi下的图片资源进行替换：返回箭头（btn_back.png）、相机图标（default_camera.png）、默认图片（default_image.png）
Example文件夹，是Android 的demo示例
images文件夹，存放的是示例演示截图

3、怎么使用？

第一步：运行环境

```省略```

第二步：更新 Gradle Settings

// file:/settings.gradle
...

include ':imagepicker'
project(':imagepicker').projectDir = new File(settingsDir, 'xxxxx/Android')

第三步：更新 app Gradle

// file:/app/build.gradle
...

dependencies {
    ...
    compile project(':imagepicker')
}

第四步：添加Package

    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        ...,
        new ImagePickerPackage()
	);

第五步：在宿主程序中配置Activity

// file:/app/src/main/AndroidManifest.xml
<activity android:name="cn.tuofeng.imagepicker.view.MultiImageSelectorActivity"/>

第六步：在JavaScript中使用

...

var ImagePickerManager = NativeModules.ImagePickerManager;

class choosePhoto extends React.Component {

    //返回值保存
    state = {
      avatarSource: null
    };


	//选择照片库
    selectPhotoFromLibrary() {
      //参数设置
      const options = {
         showCamera:true,	//是否显示照相机
         maxNumOfSelect: 5,  // 照片最大选取数
         quality: 1,  // 照片压缩率，按照像素压缩
         maxWidth: 500,  // 最大尺寸宽度
         maxHeight: 500, // 最大尺寸高度
         listNavigationBarOptions:{ // 缩略图页面，上导航条的设置项
           buttonColor:'#5877BF',//完成按钮的背景颜色
           indicatorColor:'#5877BF',//数字指示器的背景颜色
           backgroundColor:'#3F59AF',  // 上导航栏的背景颜色，默认为纯黑色
           titleColor:'#FFFFFF'  // 设置上导航栏上的字体的颜色，默认是纯白色
         },
         storageOptions: {  // 存储的设置项
           path:'savePhotoPath' // 创建存储的文件夹路径，/内存卡/Android/data/packageName/savePhotoPath
         },
         isCrop:true,//该参数为true时对第一张图片进行头像截取(可不传该参数)
      };

      ImagePickerManager.selectImage(options, (response) => {
        console.log('Response = ', response);
        if (response.didCancel) {
          console.log('用户取消选择');
        }else if (response.error) {
          console.log('图片选取错误： ', response.error);
        }else {
          // 保存回调数据，将选择的第一张图片进行演示
          this.setState({
            avatarSource: response.results[0]
          });
        }
      });
    }

    //进行拍照
    selectPhotoFromCamera() {
      //参数设置
      const options = {
         quality: 1,  // 照片压缩率，按照像素压缩
         maxWidth: 500,  // 最大尺寸宽度
         maxHeight: 500, // 最大尺寸高度
         storageOptions: {  // 存储的设置项
           path:'savePhotoPath2' // 创建存储的文件夹路径，Android.data.packageName.savePhotoPath
         }
      };

      ImagePickerManager.launchCamera(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
          console.log('用户取消选择');
        }else if (response.error) {
          console.log('图片选取错误： ', response.error);
        }else {
          // 保存回调数据，将选择的第一张图片进行演示
          this.setState({
            avatarSource: response.results[0]
          });
        }
      });
    }

    userSelect(){
      console.log('userSelect');
       //调用Android，提示出来选择列表（也可以其他方式）
      ImagePickerManager.showImagePicker("这是选择标题","取消选择",["拍照","照片选择"], (response) => {
        console.log('Response = ', response);
        if (response.error){
           console.log('showImagePicker： ', response.error);
           return;
         }
        switch(response.which){
           case 0:
             this.selectPhotoFromCamera();
             break;
           case 1:
             this.selectPhotoFromLibrary();
             break;
           default:
             console.log('取消');
             break;
         }
     });
    }

    // 渲染视图
    render() {
      return (
        <View style={styles.container}>
          <TouchableOpacity onPress={this.selectPhotoFromLibrary.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              <Text>选择照片</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity onPress={this.selectPhotoFromCamera.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              <Text>拍照</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity onPress={this.userSelect.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              <Text>用户自由选择</Text>
            </View>
          </TouchableOpacity>
          <Image style={styles.image} source={this.state.avatarSource}></Image>
        </View>
      );
    }
}

...

4、方法说明：

ImagePickerManager --- 管理对外接口的类文件
在类中暴露给js三个方法：
- 选择图片: selectImage(ReadableMap options,Callback callback)
- 启动相机: launchCamera(ReadableMap options,Callback callback)
- 显示选择框: showImagePicker(String title, String cancelText,ReadableArray options, Callback callback)
参数说明
- options: 启动参数（下面会说明）
- callback: 是当选择完成之后，将结果放到dic对象中回调给js
- title: 对话框标题
- cancelText: 对话框取消按钮文字

5、代码中核心类说明

PerformCompress: 批量压缩和保存的处理类
MultiImageSelectorActivity: 照片选择控制界面
MultiImageSelectorFragment: 照片列表展示
OptionBean: 客户端配置封装

6、参数说明

传入参数options

listNavigationBarOptions

storageOptions

|参数 |类型 |描述 | |------------|:--------:|:----------------- | |path |string |创建存储的文件夹路径；如：savePhotoPath，如果有内存卡：/内存卡/Android/data/packageName/savePhotoPath；没有内存卡的话存在应用目录对应的目录 |

返回参数response

results

exif 数码照片的信息，具体参数说明如下:

Orientation表示图片的朝向，具体值如下：

    ORIENTATION_UNDEFINED = 0;
    ORIENTATION_NORMAL = 1;
    ORIENTATION_FLIP_HORIZONTAL = 2;  // left right reversed mirror
    ORIENTATION_ROTATE_180 = 3;
    ORIENTATION_FLIP_VERTICAL = 4;  // upside down mirror
    ORIENTATION_TRANSPOSE = 5;  // flipped about top-left <--> bottom-right axis
    ORIENTATION_ROTATE_90 = 6;  // rotate 90 cw to right it
    ORIENTATION_TRANSVERSE = 7;  // flipped about top-right <--> bottom-left axis
    ORIENTATION_ROTATE_270 = 8;  // rotate 270 to right it