@tuofeng/react-native-image-picker/README.md

Image Picker

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

![选择](images/image.png)  

* 动画演示

![动画](images/animations.gif)  

2、文件夹说明
---
1. Android文件夹，存放的是多图选择器的Android端代码  
	* 注：根据产品需求可以对/Android/src/main/res/drawable-xxhdpi下的图片资源进行替换：返回箭头（btn_back.png）、相机图标（default_camera.png）、默认图片（default_image.png）
2. Example文件夹，是Android 的demo示例
3. 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、方法说明：
---
1. ImagePickerManager --- 管理对外接口的类文件  

2. 在类中暴露给js三个方法：
	* `选择图片`: selectImage(ReadableMap options,Callback callback)
	* `启动相机`: launchCamera(ReadableMap options,Callback callback)
	* `显示选择框`: showImagePicker(String title, String cancelText,ReadableArray options, Callback callback)   

3. 参数说明
	* `options`: 启动参数（下面会说明） 
	* `callback`: 是当选择完成之后，将结果放到dic对象中回调给js
	* `title`: 对话框标题
	* `cancelText`: 对话框取消按钮文字
	
5、代码中核心类说明
---
1. `PerformCompress`: 批量压缩和保存的处理类
2. `MultiImageSelectorActivity`: 照片选择控制界面
3. `MultiImageSelectorFragment`: 照片列表展示
4. `OptionBean`: 客户端配置封装

   

6、参数说明 
---

### 传入参数options

|参数                       |类型            |描述                   |
|----------------          |:--------:|:-----------------          |
|showCamera            	    |bool    	  |是否在照片列表中显示照相机      |
|maxNumOfSelect            |number    |照片的最大选取个数             |
|quality                   |number    |像素压缩率                    |
|maxWidth                  |number    |返回图片的最大宽度             |
|maxHeight                 |number    |返回图片的最大高度             |
|listNavigationBarOptions  |object    |列表页面相关设置               |
|storageOptions            |object    |存储设置项                    |

#### listNavigationBarOptions

|参数              |类型       |描述                                  |
|---------------- |:--------:|:-----------------                    |
|buttonColor      |string    |ActionBar上面提交按钮的颜色，默认'#36AF00'|
|indicatorColor   |string    |照片选择指示器，默认'#36AF00'            |
|backgroundColor  |string    |上导航条的背景颜色，默认'#000000'纯黑色    |
|titleColor       |string    |上导航条上标题颜色，默认'#FFFFFF'白色 |

#### storageOptions

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

---

### 返回参数response

|参数              |类型       |描述                          |
|---------------- |:--------:|:-----------------            |
|error            |string    |图片选取错误信息，当有错误时才返回  |
|didCancel        |bool      |用户取消照片选取，当用户取消选择照片时返回true |
|denied           |bool      |没有照相机或者内存卡写入权限       |
|numOfSelect      |number    |返回选择的照片个数，当正确选择照片后返回  |
|results          |object    |返回的照片信息集，当正确选择完照片后返回  |

#### results

|参数              |类型       |描述                |
|---------------- |:--------:|:-----------------  |
|uri              |string    |照片存在本地的路径     |
|width            |number    |照片宽度             |
|height           |number    |照片高度             |
|fileSize         |string    |图片大小（字节）      |
|exif             |object    |数码照片的信息        |

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

|参数              |类型       |描述               |
|---------------- |:--------:|:----------------- |
|DPIWidth         |number    |水平方向每个分辨率单元的像素数|
|DPIHeight        |number    |垂直方向每个分辨率单元的像素数|
|Make             |string    |设备制造商          |
|Model            |string    |设备型号            |
|DateTimeOriginal |string    |照片的拍摄时间， 格式为2016-07-06 18:54:10  |
|LensMake         |string    |镜头制造商          |
|LensModel        |string    |镜头型号            |
|Altitude         |string    |海拔高度            |
|Latitude         |string    |纬度               |
|LatitudeRef      |string    |纬度类型，北纬'N'、南纬'S'|
|Longitude        |string    |经度               |
|LongitudeRef     |string    |经度类型，东经'E'、西经'W'|
|Orientation      |number    |照片朝向，值是数字，1表示朝上|
|PixelWidth       |number    |水平方向像素点|
|PixelHeight      |number    |垂直方向像素点|

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
```