Skip to content

R
react-native-syan-image-picker
Commit ab9db089 authored by cookiej's avatar cookiej
Browse files
Options

Android支持返回图片大小

parent 09b4d621
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 128 deletions
README.md
View file @ ab9db089
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
基于已有原生第三方框架封装的多图片选择组件，适用于 React Native App。 基于已有原生第三方框架封装的多图片选择组件，适用于 React Native App。
### 原生框架依赖 ### 原生框架依赖
> * Android： [PictureSelector 2.2.0](https://github.com/LuckSiege/PictureSelector) - by [LuckSiege](https://github.com/LuckSiege) * Android： [PictureSelector 2.2.0](https://github.com/LuckSiege/PictureSelector) - by [LuckSiege](https://github.com/LuckSiege)
> * iOS：[TZImagePickerController 2.0.0.4](https://github.com/banchichen/TZImagePickerController) - by [banchichen](https://github.com/banchichen) * iOS：[TZImagePickerController 2.0.0.4](https://github.com/banchichen/TZImagePickerController) - by [banchichen](https://github.com/banchichen)
### 功能特点 ### 功能特点
* 支持 iOS、Android 两端 * 支持 iOS、Android 两端
...@@ -135,118 +135,93 @@ android { ...@@ -135,118 +135,93 @@ android {
## 运行示例 ## 运行示例
相关 Demo 见 [ImagePickerExample](https://github.com/syanbo/ImagePickerExample)。以下为入口文件，可参考使用方式的注释： 相关 Demo 见 [ImagePickerExample](https://github.com/syanbo/ImagePickerExample)。
## 配置参数说明
组件调用时，支持传入一个 `options` 对象，可设置的属性如下：
属性名 | 类型 | 是否可选 | 默认值 | 描述
---------------- | ------ | -------- | ----------- | -----------
imageCount | int | 是 | 6 | 最大选择图片数目
isCamera | bool | 是 | true | 是否允许用户在内部拍照
isCrop | bool | 是 | false | 是否允许裁剪，imageCount 为1才生效
CropW | int | 是 | screenW * 0.6 | 裁剪宽度，默认屏幕宽度60%
CropH | int | 是 | screenW * 0.6 | 裁剪高度，默认屏幕宽度60%
isGif | bool | 是 | false | 是否允许选择GIF，暂无回调GIF数据
showCropCircle | bool | 是 | false | 是否显示圆形裁剪区域
circleCropRadius | float | 是 | screenW * 0.5 | 圆形裁剪半径，默认屏幕宽度一半
showCropFrame | bool | 是 | true | 是否显示裁剪区域
showCropGrid | bool | 是 | false | 是否隐藏裁剪区域网格
quality | int | 是 | 90 | 压缩质量
enableBase64 | bool | 是 | false | 是否返回base64编码，默认不返回
## 返回结果说明
以 `Callback` 形式调用时，返回的第一个参数为错误对象，第二个才是图片数组：
属性名 | 类型 | 描述
---------------- | ------ | -----------
error | object | 取消拍照时不为 null，此时 `error.message` == '取消'
photos | array | 选择的图片数组
而以 `Promise` 形式调用时，则直接返回图片数组，在 `catch` 中去处理取消选择的情况。
下面是每张图片对象所包含的属性：
属性名 | 类型 | 描述
---------------- | ------ | -----------
width | int | 图片宽度
height | int | 图片高度
uri | string | 图片路径
original_uri | string | 图片原始路径，仅 Android
type | string | 文件类型，仅 Android，当前只返回 `image`
size | int | 图片大小，单位为字节 `b`
base64 | string | 图片的 base64 编码，如果 `enableBase64` 设置 false，则不返回该属性
## 方法调用
### Callback
回调形式需调用 `showImagePicker` 方法：
```javascript ```javascript
// react-native-syan-image-picker/index.js import SyanImagePicker from 'react-native-syan-image-picker';
import {
NativeModules, SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
Dimensions, if (err) {
} from 'react-native'; // 取消选择
return;
const { RNSyanImagePicker } = NativeModules; }
const { width } = Dimensions.get('window'); // 选择成功，渲染图片
/** // ...
* 默认参数 })
*/ ```
const defaultOptions = { ### Promise
imageCount: 6, // 最大选择图片数目，默认6 非回调形式则使用 `asyncShowImagePicker` 方法：
isCamera: true, // 是否允许用户在内部拍照，默认true ```javascript
isCrop: false, // 是否允许裁剪，默认false, imageCount 为1才生效 import SyanImagePicker from 'react-native-syan-image-picker';
CropW: ~~(width * 0.6), // 裁剪宽度，默认屏幕宽度60%
CropH: ~~(width * 0.6), // 裁剪高度，默认屏幕宽度60% // promise-then
isGif: false, // 是否允许选择GIF，默认false，暂无回调GIF数据 SYImagePicker.asyncShowImagePicker(options)
showCropCircle: false, // 是否显示圆形裁剪区域，默认false .then(photos => {
circleCropRadius: width/2, // 圆形裁剪半径，默认屏幕宽度一半 // 选择成功
showCropFrame: true, // 是否显示裁剪区域，默认true })
showCropGrid: false, // 是否隐藏裁剪区域网格，默认false .catch(err => {
quality: 90, // 压缩质量 // 取消选择，err.message为"取消"
enableBase64: false, // 是否返回base64编码，默认不返回 })
};
// async/await
export default { handleSelectPhoto = async () => {
/** try {
* 以Callback形式调用 const photos = await SYImagePicker.asyncShowImagePicker(options);
* 1、相册参数暂时只支持默认参数中罗列的属性； // 选择成功
* 2、回调形式：showImagePicker(options, (err, selectedPhotos) => {}) } catch (err) {
* 1）选择图片成功，err为null，selectedPhotos为选中的图片数组 // 取消选择，err.message为"取消"
* 2）取消时，err返回"取消"，selectedPhotos将为undefined }
* 按需判断各参数值，确保调用正常，示例使用方式： }
* showImagePicker(options, (err, selectedPhotos) => { ```
* if (err) { ### 调用相机
* // 取消选择 相机功能调用 `openCamera` 方法，一样支持 Callback 和 Promise 两种形式，结果参数也保持一致。
* return;
* }
* // 选择成功
* })
*
* @param {Object} options 相册参数
* @param {Function} callback 成功，或失败回调
*/
showImagePicker(options, callback) {
const optionObj = {
...defaultOptions,
...options
};
RNSyanImagePicker.showImagePicker(optionObj, callback)
},
/**
* 以Promise形式调用
* 1、相册参数暂时只支持默认参数中罗列的属性；
* 2、使用方式
* 1）async/await
* handleSelectPhoto = async () => {
* try {
* const photos = await SYImagePicker.asyncShowImagePicker(options);
* // 选择成功
* } catch (err) {
* // 取消选择，err.message为"取消"
* }
* }
* 2）promise.then形式
* handleSelectPhoto = () => {
* SYImagePicker.asyncShowImagePicker(options)
* .then(photos => {
* // 选择成功
* })
* .catch(err => {
* // 取消选择，err.message为"取消"
* })
* }
* @param {Object} options 相册参数
* @return {Promise} 返回一个Promise对象
*/
asyncShowImagePicker(options) {
const optionObj = {
...defaultOptions,
...options,
};
return RNSyanImagePicker.asyncShowImagePicker(optionObj);
},
/**
* 打开相机支持裁剪参数
* @param options
* @param callback
*/
openCamera(options, callback) {
const optionObj = {
...defaultOptions,
...options
};
RNSyanImagePicker.openCamera(optionObj, callback)
},
/**
* 清除缓存
*/
deleteCache() {
RNSyanImagePicker.deleteCache()
}
};
### 删除缓存
```javascript
SYImagePicker.deleteCache();
``` ```
## 帮助 ## 帮助
加入 React-Native QQ群 397885169 加入 React-Native QQ群 397885169
## 非常感谢 ## 非常感谢
...@@ -257,5 +232,5 @@ export default { ...@@ -257,5 +232,5 @@ export default {
[ljunb](https://github.com/ljunb) [ljunb](https://github.com/ljunb)
## 捐助 ## 捐赠
随时欢迎！！☕️☕️☕️✨✨ 随时欢迎！！☕️☕️☕️✨✨
android/src/main/java/com/reactlibrary/RNSyanImagePickerModule.java
View file @ ab9db089
...@@ -187,6 +187,7 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule { ...@@ -187,6 +187,7 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule {
case PictureConfig.CHOOSE_REQUEST: case PictureConfig.CHOOSE_REQUEST:
selectList = PictureSelector.obtainMultipleResult(data); selectList = PictureSelector.obtainMultipleResult(data);
WritableArray imageList = new WritableNativeArray(); WritableArray imageList = new WritableNativeArray();
boolean enableBase64 = cameraOptions.getBoolean("enableBase64");
for (LocalMedia media : selectList) { for (LocalMedia media : selectList) {
WritableMap aImage = new WritableNativeMap(); WritableMap aImage = new WritableNativeMap();
...@@ -203,14 +204,11 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule { ...@@ -203,14 +204,11 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule {
//decode to bitmap //decode to bitmap
Bitmap bitmap = BitmapFactory.decodeFile(media.getPath()); Bitmap bitmap = BitmapFactory.decodeFile(media.getPath());
//convert to byte array aImage.putInt("size", bitmap.getByteCount());
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
byte[] bytes = baos.toByteArray();
//base64 encode //base64 encode
if (cameraOptions.getBoolean("enableBase64")) { if (enableBase64) {
byte[] encode = Base64.encode(bytes,Base64.DEFAULT); String encodeString = getBase64EncodeString(bitmap);
String encodeString = new String(encode);
aImage.putString("base64", encodeString); aImage.putString("base64", encodeString);
} }
} else { } else {
...@@ -223,14 +221,11 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule { ...@@ -223,14 +221,11 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule {
//decode to bitmap //decode to bitmap
Bitmap bitmap = BitmapFactory.decodeFile(media.getCompressPath()); Bitmap bitmap = BitmapFactory.decodeFile(media.getCompressPath());
//convert to byte array aImage.putInt("size", bitmap.getByteCount());
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
byte[] bytes = baos.toByteArray();
//base64 encode //base64 encode
if (cameraOptions.getBoolean("enableBase64")) { if (enableBase64) {
byte[] encode = Base64.encode(bytes,Base64.DEFAULT); String encodeString = getBase64EncodeString(bitmap);
String encodeString = new String(encode);
aImage.putString("base64", encodeString); aImage.putString("base64", encodeString);
} }
} }
...@@ -240,8 +235,6 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule { ...@@ -240,8 +235,6 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule {
} else { } else {
aImage.putString("original_uri", "file://" + media.getPath()); aImage.putString("original_uri", "file://" + media.getPath());
} }
// TODO: 获取图片size
aImage.putInt("size", 0);
imageList.pushMap(aImage); imageList.pushMap(aImage);
} }
...@@ -254,6 +247,21 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule { ...@@ -254,6 +247,21 @@ public class RNSyanImagePickerModule extends ReactContextBaseJavaModule {
} }
}; };
/**
* 获取图片base64编码字符串
* @param bitmap Bitmap对象
* @return base64字符串
*/
private String getBase64EncodeString(Bitmap bitmap) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
byte[] bytes = baos.toByteArray();
byte[] encode = Base64.encode(bytes,Base64.DEFAULT);
String encodeString = new String(encode);
return encodeString;
}
/** /**
* 选择照片成功时触发 * 选择照片成功时触发
* @param imageList 图片数组 * @param imageList 图片数组
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment