native react 图片裁剪_react native 头像上传 react-native-image-crop-picker
之前用的是react-native-image-picker,但是当往服务器端传的时候才发现,因为没有图片裁切,所以图片过大,无法保存,所以只好更换成react-native-image-crop-picker。
react-native-image-crop-picker 不像 react-native-image-picker 直接就有弹出框,然后根据选择跳入到相应的相机或相册中,所以需要我们自定义弹出框,这里使用的是 modal。
react-native-image-crop-picker 的导入及配置这里就不说了,可以参考github上:
https://github.com/ivpusic/react-native-image-crop-picker
1、自定义弹出框(modal)
react native 提供的 Alert 局限性较大,没有办法自定义,所以我这里选择用 Modal 来实现。
简单了解:Modal组件可以用来覆盖包含 react native 根视图的原生视图,在嵌入 react native 的混合应用中可以使用 modal,modal 可以使你应用中 RN 编写的那部分内容覆盖在原生视图上显示。
常见属性:
visible // 是否可见 false/true
animationType // 动画 none:无/slide:从底部/fade:淡入淡出
transparent = {true} // 是否默认半透明
onRequestClose={()=> this.onRequestClose()} // 弹出框关闭回调
visible={this.state.modalVisible}
animationType={'fade'}
transparent = {true}
onRequestClose={()=> this.onRequestClose()}
>
请选择
打开相机
打开相册
取消
用 state 中 modalVisible 的状态来管理弹出框的显示与关闭。
style样式:
alertBackground:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'rgba(0, 0, 0, 0.5)’, // 如果要遮罩要显示成半透明状态,这里一定要设置,reba中的a控制透明度,取值在 0.0 ~ 1.0 范围内。
},
alertBox: {
width:200,
height:175,
backgroundColor:'white',
},
_openCamera: // 调用相机,这里就要用到 react-native-image-crop-picker 了,所以记得 import 它。
// 是一个异步加载,当正确是返回 image ,这里面就是我们需要的图片信息。
ImagePicker.openCamera({
width:300,
height:400,
cropping:true
}).then(image => {
let source = {uri: image.path};
this._fetchImage(image);
this.setState({
avatarSource: source // 将图片存于本地
});
});
_openPicker: // 调用相册
ImagePicker.openPicker({
width:300,
height:400,
cropping: true
}).then(image => {
let source = {uri: image.path};
this._fetchImage(image);
this.setState({
avatarSource: source
});
});
将图片文件上传:
_fetchImage(image) {
let url = “http:。。。。。。。。”; // 接口地址
let file = {uri: image.path, type: 'multipart/form-data', name:’image.png' } ; // file 中这三个元素缺一不可。 type 必须为 multipart/form-data。
let formData = new FormData();
formData.append('file', file); // 这里的 file 要与后台名字对应。
fetch(url,{
method:'POST',
headers:{
'Content-Type':'multipart/form-data',
},
body:formData,
}).then(function (response) {
console.log("response",response);
return response.json();
})
}
native react 图片裁剪_react native 头像上传 react-native-image-crop-picker相关推荐
- Vue - 实现图片裁剪功能,并上传到服务器(内置第三方最优秀的裁剪图片组件,上传到服务器功能)干净整洁无 BUG 的示例源码与超详细的注释,兼容任意浏览器
前言 您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
- PHP Uploadify+jQuery.imgAreaSelect插件+AJAX 实现图片上传裁剪 仿微博头像上传功能
http://blog.csdn.net/as66t/article/details/11688217 http://blog.mc-zone.me/article/226#comment-2991 ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- Android头像上传时裁剪图片过大问题,裁剪大图片导致
原先在完成头像上传功能的时候复制网上写好的代码,虽然也仔细研究过实现的过程但是这次项目中却遇到了一个很不解的问题,使用乐视手机实现图片裁剪的那一步骤中由于图片太大手机性能不够导致图片无法裁剪报出错误 ...
- flash 图片剪切 php,flash + php头像上传预览裁剪组件1.8发_php
安装及部署: 1. 上传到 apache,iis,Tomcat 服务器,通过域名访问 index.html v1.8 1.优化摄像头拍照不清晰(目前支持高清) v1.7 http://www.gaod ...
- 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...
- android 华为裁剪全图,华为手机头像上传裁剪操作 报错
华为手机头像上传操作, 裁剪点存储--进入裁剪后--点确定, 就直接报错退出程序了,其他机型测都是成功的,求大神指教 报错代码 @Override protected void onActivityR ...
- vue 移动端头像裁剪_移动端 上传头像 并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
- imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
最新文章
- cuda 0 not supported xla
- 好久没有深入研究技术了,最近这两年太忙但又不知道忙了些什么
- 初学者万年历c语言源代码,C语言万年历的源程序
- mysql错误总结-ERROR 1067 (42000): Invalid default value for TIMESTAMP
- 用nohup执行python程序时,print无法输出
- Nginx 笔记与总结(12)Nginx URL Rewrite 实例(ecshop)
- 为什么大公司一定要使用 DevOps?
- ISAKMP包数据属性格式
- python 微信爬虫_Python爬虫实战(三) — 微信文章爬虫
- 显示器测试软件贴吧,卡硬工具箱怎么检测显示器 屏幕坏点查看教程
- 城建税和教育费附加怎么计算
- 2017总结,附书单、项目,只喜欢有趣的。。
- JUC学习笔记(二)——常用的辅助类
- 深入理解机器学习——集成学习(Ensemble Learning):基础知识
- 分享回顾|我们是神经搜索少年团!
- 第4章 点云的滤波与分类 4.1点云数据的过滤
- Dart中常量构造函数
- nginx设置IP、文件目录、请求头白名单
- idea中设置jdk
- 普及一下什么是蓝牙和BLE,看完让你秒懂
热门文章
- Hadoop常见端口总结
- 无法启动QPCore Service
- 大数据分析的处理流程
- 红帽linux安装vnc,redhat企业7.0安装VNC
- python报表自动化系列 - 为pandas.DataFrame制作自然数索引(更改索引为从1开始的自然数)
- python后端设计_Python后端设计模式
- asr1009查看接口光衰_python脚本检查H3C交换机光衰
- java调取对方接口_java中如何调用对方接口
- c语言二维数组应该注意,第08天C语言(02):二维数组-注意点
- 起床困难综合症(位运算)