首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >React Native图片选择裁剪组件

React Native图片选择裁剪组件

作者头像
forrest23
发布于 2018-08-03 15:22:15
发布于 2018-08-03 15:22:15
2.5K0
举报

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native图片选择裁剪组件:react-native-image-crop-picker,支持安卓和IOS双平台,支持从相册、相机选择图片和视频,可以单选和多选,可以压缩和裁剪。

效果图

安装方法

代码语言:javascript
复制
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

如果需要操作视频,需要安装

代码语言:javascript
复制
npm i react-native-video --save
react-native link react-native-video

因为需要操作相册和相机,IOS需要增加隐私访问说明,修改info.plist文件增加以下项:

代码语言:javascript
复制
<key>NSPhotoLibraryUsageDescription</key>
    <string>此 App 需要您的同意才能读取相册</string>
    <key>NSCameraUsageDescription</key>
    <string>此 App 需要您的同意才能使用相机</string>

示例代码

从相册选择单个图片并裁剪

代码语言:javascript
复制
ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

从相册选择多个图片

代码语言:javascript
复制
ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});

从相册选择视频

代码语言:javascript
复制
ImagePicker.openPicker({
  mediaType: "video",
}).then((video) => {
  console.log(video);
});

从相机选择图片

代码语言:javascript
复制
ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

裁剪图片

代码语言:javascript
复制
ImagePicker.openCropper({
  path: 'my-file-path.jpg',
  width: 300,
  height: 400
}).then(image => {
  console.log(image);
});

主要参数说明

  • cropping 是否进行裁剪 bool (default false)
  • width 裁剪图片的宽度
  • height 裁剪图片的高度
  • multiple 是否多选 bool (default false)
  • includeBase64 是否返回Base64的图片数据 bool (default false)
  • mediaType 媒体类别 'photo', 'video', or 'any'
  • cropperCircleOverlay 使用圆形遮盖裁剪

完整示例

完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component08文件夹中。请不要吝啬你们的Star!

组件地址

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-07,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 效果图
  • 安装方法
  • 示例代码
    • 从相册选择单个图片并裁剪
    • 从相册选择多个图片
    • 从相册选择视频
    • 从相机选择图片
    • 裁剪图片
  • 主要参数说明
  • 完整示例
  • 组件地址
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档