github react-native-image-crop-picker
我的简书：http://www.jianshu.com/p/8420b08062c7
文章已更新2017/6/19日 如有错误不妥的地方，请及时联系我更正。谢谢
react-native-image-crop-picker是一款注重剪裁,相册单选、多选的第三方框架。在我集成了react-native-image-picker的时候发现，他的剪裁不太友好。作者推荐了这个react-native-image-crop-picker。看到搜索不到该中文的翻译，故此文作为学习总结。
实际效果:
我用的是魅族pro6,实现和github作者图有点出入,基本没有自己处理界面，我觉得还是可以接受的。
react-native-image-crop-picker 原文如下：
支持IOS/Android的相机，视频压缩，多个图像选择和裁剪处理。
github效果
使用
导入library
import ImagePicker from 'react-native-image-crop-picker';
从图库中选择
调用单图选择器与裁剪
ImagePicker.openPicker({
width: 300,height: 400,cropping: true
}).then(image => {
console.log(image);
});
选择多个图片的选择器
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
从照相中选择
ImagePicker.openCamera({
width: 300,cropping: true
}).then(image => {
console.log(image);
});
裁剪图片
ImagePicker.openCropper({
path: 'my-file-path.jpg',width: 300,height: 400
}).then(image => {
console.log(image);
});
@H_404_116@选择清理
模块创建临时文件图像将在未来的某个时间自动清理。 如果要强制清理，可以使用clean清理所有临时文件图像，或者使用cleanSingle（path）清除单个临时文件。
ImagePicker.clean().then(() => { console.log('removed all tmp images from tmp directory'); }).catch(e => { alert(e); });
请求对象
注：这里希望开发者不清楚的可以自己尝试，看下效果
| 参数 | 类型 | 描述 |
|---|---|---|
| cropping | bool (default false) | 是否打开裁剪 |
| width | number | 与cropping=true一起使用的，裁剪后的宽度 |
| height | number | 与cropping=true一起使用的，裁剪后的高度 |
| multiple | bool (default false) | 启用或禁用多个图像选择 |
| includeBase64 | bool (default false) | 启用或禁用使用图像返回base64数据 |
| cropperActiveWidgetColor (android only | string (default “#424242”) | 裁剪图像时，确定工具栏和其他UX元素的颜色。 |
| cropperStatusBarColor (android only | string (default “#424242”) | 裁剪图像时，决定状态栏StatusBar颜色。 |
| cropperToolbarColor (android only) | string (default #424242) | 裁剪图像时，决定状态栏Toolbar颜色. |
| cropperCircleOverlay | bool (default false) | 裁剪图像时候，是否打开圆形裁剪覆盖(注:我的理解是圆形裁剪框) |
| maxFiles (ios only) | number (default 5) | 最多能够选取的文件数,配合multiple=true |
| waitAnimationEnd (ios only) | bool (default true) | Promise will resolve/reject once ViewController completion block is called |
| compressVideo (ios only) | bool (default true) | 选择视频时，压缩它并将其转换为mp4 |
| smartAlbums (ios only) | array (default [‘UserLibrary’,‘PhotoStream’,‘Panoramas’,‘Videos’,‘Bursts’]) | (列出可供选择的智能相册)List of smart albums to choose from |
| useFrontCamera (ios only) | bool (default false) | 相机打开时是否定义文字字体 |
| compressVideoPreset (ios only) | string (default MediumQuality) | 选择预设一个视频压缩度 |
| compressImageMaxWidth | number (default none) | 压缩图像最大宽度 |
| compressImageMaxHeight | number (default none) | 压缩图像最大高度 |
| compressImageQuality | number (default 1) | 压缩图片的质量(从0到1,1是最大质量) |
| loadingLabelText (ios only) | string (default “Processing assets…”) | 图片加载时候文字显示 |
| mediaType | string (default any) | 选择一个媒体类型 photo/video/any/ |
| showsSelectedCount (ios only) | bool (default true) | 是否显示选中图片的数量 |
| showCropGuidelines (android only) | bool (default true) | 裁剪过程中是否显示3x3的网格线 |
| hideBottomControls (android only) | bool (default false) | 是否展示底部控件 |
| enableRotationGesture (android only) | bool (default false) | 是否可以通过手势来旋转图像。 |
返回对象
| 参数 | 类型 | 描述 |
|---|---|---|
| string | 选中文件的位置 | |
| number | 选中文件的宽度 | |
| number | 选中文件的高度 | |
| string | 选中图片的MIME类型(image/jpeg,image/png) | |
| number | 所选图像大小（以字节为单位） | |
| base64 | (选择文件以base64表示)Optional base64 selected file representation |
安装
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
安装后步骤
iOS (IOS没了解,暂时没有去进行翻译)
cocoapods users
Add platform :ios,'8.0'to Podfile (!important)
Add pod 'RSKImageCropper' and pod 'QBImagePickerController'to Podfile
non-cocoapods users
Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure
Copy items if needed IS ticked)
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
Android
* 保证你使用了 Gradle 2.2.x 以上 (project build.gradle)
buildscript {
...
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
...
}
...
}
- app build.gradle 中添加useSupportLibrary
android {
...
defaultConfig {
...
vectorDrawables.useSupportLibrary = true
...
}
...
}
- [可选] 如果使用照相机在你的项目中,AndroidManifest.xml添加
<uses-permission android:name="android.permission.CAMERA"/>
构建
Android:
不需要其他操作
iOS
cocoapods users
你已经完成，不需要其他的操作；
non-cocoapods users
If you are using pre-built frameworks from ios/ImageCropPickerSDK,then before deploying app to production you should strip off simulator
ARCHs from these,or you can add frameworks
from Libraries/imageCropPicker/Libraries/_framework_name_.
xcodeproj/Products/_framework_name_.framework
to Embedded Binaries instead of pre-built ones. Related
issue: [https://github.com/ivpusic/react-native-image-crop-
picker/issues/61](https://github.com/ivpusic/react-native-image-crop-
picker/issues/61).
Details for second approach:
1. Remove the pre-built frameworks from Embedded Binaries
2. Build for Device
3. Add the newly built binaries for both frameworks to Embedded Binaries (located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework)
许可
MIT
