React Native图片选择裁剪组件

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

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

效果图

安装方法

npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

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

npm i react-native-video --save
react-native link react-native-video

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

<key>NSPhotoLibraryUsageDescription</key>
    <string>此 App 需要您的同意才能读取相册</string>
    <key>NSCameraUsageDescription</key>
    <string>此 App 需要您的同意才能使用相机</string>

示例代码

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

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

从相册选择多个图片

ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});

从相册选择视频

ImagePicker.openPicker({
  mediaType: "video",
}).then((video) => {
  console.log(video);
});

从相机选择图片

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

裁剪图片

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

本文分享自微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang语言--- channel

// xuhh_go_channel project main.go /* channel 1. channel 在读取数据的时候,如果此时通道...

38290
来自专栏阿炬.NET

常用插件备份

33980
来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

36220
来自专栏前端人人

React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

37940
来自专栏Android Note

Android O:使用自定义字体资源

23730
来自专栏十月梦想

Vue动画之使用volecity.js动画库

在vue中使用动画都要放在transition组件中,以后不再累述!我们还看上个例子!

1.8K50
来自专栏Android-薛之涛

Android - 自定义View,实现不一样的输入框

最近看到一个效果,就是在登陆界面输入账号密码的时候,会有一个动画效果,感觉不错,找了一些资料,学习了一下。已经实现效果,效果如下:

49720
来自专栏Guangdong Qi

# 微信小程序开发之-事件触发控件

27630
来自专栏技术博文

实用:Google Chrome 键盘快捷键大全

窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开链接 按住 Shift 键,然后点击链接 在新...

32680
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

24230

扫码关注云+社区

领取腾讯云代金券