react-native-image-crop-picker学习

github react-native-image-crop-picker

http://www.jianshu.com/p/8420b08062c7

react-native-image-crop-picker是一款注重剪裁,相册单选、多选的第三方框架。在我集成了react-native-image-picker的时候发现，他的剪裁不太友好。作者推荐了这个react-native-image-crop-picker。看到搜索不到该中文的翻译，故此文作为学习总结。

实际效果:

---

我用的是魅族pro6, 实现和github作者图有点出入, 基本没有自己处理界面：我觉得还是可以接受的。

照相机裁剪旋转.jpg

相册选择.jpg

react-native-image-crop-picker 原文如下：

---

支持IOS/Android的相机，视频压缩，多个图像选择和裁剪处理。

github效果

---

Paste_Image.png

Paste_Image.png

使用

---

导入

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, height: 400, cropping: true})       .then(image => { console.log(image);});

选择清理

模块创建临时文件图像将在未来的某个地方自动清理。 如果要强制清理，可以使用clean清理所有临时文件图像，或者使用cleanSingle（path）清除单个临时文件。

ImagePicker.clean().then(() => {      console.log('removed all tmp images from tmp directory');})     .catch(e => { alert(e);});

请求对象

参数类型描述croppingbool (default false)是否打开裁剪widthnumber与cropping=true一起使用的，裁剪后的宽度heightnumber与cropping=true一起使用的，裁剪后的高度multiplebool (default false)启用或禁用多个图像选择includeBase64bool (default false)启用或禁用使用图像返回base64数据cropperTintColor (android onlystring (default "#424242")裁剪图像时，确定工具栏和其他UX元素的颜色。 使用UCrop的setToolbarColor，setActiveWidgetColor和setStatusBarColor颜色指定。maxFiles (ios only)number (default 5)最多能够选取的文件数,配合multiple=truecompressVideo (ios only)bool (default true)选择视频时，压缩它并将其转换为mp4smartAlbums (ios only)array (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts'])(智能相册列表可供选择)List of smart albums to choose from 【有点后续理解】

返回对象

参数类型描述pathstring选中文件的位置widthnumber选中文件的宽度heightnumber选中文件的高度mimestring选中图片的MIME类型(image/jpeg, image/png)sizenumber所选图像大小（以字节为单位）database64(已选择的可选base64文件体现)Optional base64 selected file representation

安装

---

npm i react-native-image-crop-picker --savereact-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 Podfilenon-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.frameworkAndroid    [可选]如果你想选择相册在你的项目中 在AndroidManifest.xml中          <uses-permission android:name="android.permission.CAMERA"/>

构建

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)

如何工作的

基本包含的库。

Android ：     Native Image Picker     uCropiOS:     QBImagePickerController    RSKImageCropper