2016-05-18 10:07:36 +00:00
|
|
|
# react-native-image-crop-picker
|
2016-08-25 23:48:45 +00:00
|
|
|
iOS/Android image picker with support for camera, multiple images and cropping
|
2016-05-18 10:07:36 +00:00
|
|
|
|
|
|
|
## Result
|
|
|
|
|
2016-07-27 00:30:48 +00:00
|
|
|
<img width=200 title="iOS Single Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_single_pick.png">
|
|
|
|
<img width=200 title="iOS Crop" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_crop.png">
|
2016-05-18 10:07:36 +00:00
|
|
|
<img width=200 title="iOS Multiple Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_multiple_pick.png">
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
Import library
|
|
|
|
```javascript
|
|
|
|
import ImagePicker from 'react-native-image-crop-picker';
|
|
|
|
```
|
|
|
|
|
2016-08-11 21:45:33 +00:00
|
|
|
#### Select from gallery
|
|
|
|
|
2016-05-18 10:07:36 +00:00
|
|
|
Call single image picker with cropping
|
|
|
|
```javascript
|
|
|
|
ImagePicker.openPicker({
|
|
|
|
width: 300,
|
|
|
|
height: 400,
|
|
|
|
cropping: true
|
|
|
|
}).then(image => {
|
|
|
|
console.log(image);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
Call multiple image picker
|
|
|
|
```javascript
|
|
|
|
ImagePicker.openPicker({
|
|
|
|
multiple: true
|
|
|
|
}).then(images => {
|
|
|
|
console.log(images);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
2016-08-11 21:45:33 +00:00
|
|
|
#### Select from camera
|
|
|
|
```javascript
|
|
|
|
ImagePicker.openCamera({
|
|
|
|
width: 300,
|
|
|
|
height: 400,
|
|
|
|
cropping: true
|
|
|
|
}).then(image => {
|
|
|
|
console.log(image);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
2016-08-05 18:57:10 +00:00
|
|
|
#### Request Object
|
|
|
|
|
|
|
|
| Property | Type | Description |
|
|
|
|
| ------------- |:-------------:| :-----|
|
|
|
|
| cropping | bool (default false) | Enable or disable cropping |
|
|
|
|
| width | number | Width of result image when used with `cropping` option |
|
|
|
|
| height | number | Height of result image when used with `cropping` option |
|
|
|
|
| multiple | bool (default false) | Enable or disable multiple image selection |
|
|
|
|
| includeBase64 | bool (default false) | Enable or disable returning base64 data with image |
|
|
|
|
| maxFiles (ios only) | number (default 5) | Max number of files to select when using `multiple` option |
|
|
|
|
|
2016-06-20 22:38:51 +00:00
|
|
|
#### Response Object
|
|
|
|
|
|
|
|
| Property | Type | Description |
|
|
|
|
| ------------- |:-------------:| :-----|
|
|
|
|
| path | string | Selected image location |
|
|
|
|
| width | number | Selected image width |
|
|
|
|
| height | number | Selected image height |
|
|
|
|
| mime | string | Selected image MIME type (image/jpeg, image/png) |
|
|
|
|
| size | number | Selected image size in bytes |
|
2016-08-09 08:27:22 +00:00
|
|
|
| data | base64 | Optional base64 selected file representation |
|
2016-06-20 22:38:51 +00:00
|
|
|
|
2016-05-18 10:07:36 +00:00
|
|
|
## Install
|
|
|
|
|
|
|
|
```
|
2016-08-25 23:48:45 +00:00
|
|
|
npm i react-native-image-crop-picker --save
|
2016-08-25 23:04:38 +00:00
|
|
|
react-native link react-native-image-crop-picker
|
2016-05-18 10:07:36 +00:00
|
|
|
```
|
|
|
|
|
2016-08-25 23:04:38 +00:00
|
|
|
#### Post-install steps
|
2016-07-14 20:56:07 +00:00
|
|
|
|
2016-08-25 23:04:38 +00:00
|
|
|
##### iOS
|
2016-09-02 12:18:32 +00:00
|
|
|
- Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure Copy items if needed IS ticked)
|
2016-08-25 23:04:38 +00:00
|
|
|
- Click on project General tab
|
|
|
|
- Under `Deployment Info` set `Deployment Target` to `8.0`
|
|
|
|
- Under `Embedded Binaries` click `+` and add `RSKImageCropper.framework` and `QBImagePicker.framework`
|
2016-05-18 10:07:36 +00:00
|
|
|
|
2016-08-26 13:20:27 +00:00
|
|
|
##### Android
|
|
|
|
|
|
|
|
- [Optional] If you want to use camera picker in your project, add following to `AndroidManifest.xml`
|
|
|
|
- `<uses-permission android:name="android.permission.CAMERA"/>`
|
|
|
|
|
2016-05-18 10:07:36 +00:00
|
|
|
## How it works?
|
|
|
|
|
|
|
|
It is basically wrapper around few libraries
|
|
|
|
|
|
|
|
#### Android
|
|
|
|
- Native Image Picker
|
|
|
|
- uCrop
|
|
|
|
|
|
|
|
#### iOS
|
|
|
|
- QBImagePickerController
|
|
|
|
- RSKImageCropper
|
|
|
|
|
|
|
|
## License
|
|
|
|
*MIT*
|