java实现上传寸照并剪裁_Flutter——头像上传功能,实现照片选择及裁剪
使用两个开发库,image_picker和image_crop。
前者用来拍照或者从相册选择照片,后者用来裁剪,结果均为File类型,裁剪完成后可以直接上传文件。
先写到这儿,有时间上代码。
更新:
实现的功能是点击头像图片,弹出选择框,选择拍照或者从相册中选取:
选择头像上传方式
拍照或选取一张图片后,裁剪到想要大小。进行保存或者上传。
实现:
首先的首先,在Android的manifest文件中,加入网络、相机、文件读写的权限,并在application中加入一个activity声明。
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
首先在yaml文件中添加依赖:上https://pub.dartlang.org/packages/ flutter第三方插件官网,找最新版即可。添加之后 package get。
在调用的文件导入包,
import 'package:image_picker/image_picker.dart';
点击按钮,进行拍照:
///拍摄照片
Future getImage() async {
await ImagePicker.pickImage(source: ImageSource.camera)
.then((image) => cropImage(image));
}
通过相册选取:
///从相册选取
Future chooseImage() async {
await ImagePicker.pickImage(source: ImageSource.gallery)
.then((image) => cropImage(image));
}
.then拿到的是拍好的照片,之后进行跳转到剪裁页面CropImageRoute 进行剪裁。
void cropImage(File originalImage) async {
String result = await Navigator.push(context,
MaterialPageRoute(builder: (context) => CropImageRoute(originalImage)));
if (result.isEmpty) {
print('上传失败');
} else {
//result是图片上传后拿到的url
setState(() {
iconUrl = result;
print('上传成功:$iconUrl');
_upgradeRemoteInfo();//后续数据处理,这里是更新头像信息
});
}
}
剪裁页面CropImageRoute 代码:
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_productapp/home/moudel/upload_result.dart';
import 'package:flutter_productapp/home/util/screen.dart';
import 'package:flutter_productapp/base_ui/themes.dart';
import 'package:image_crop/image_crop.dart';
class CropImageRoute extends StatefulWidget {
CropImageRoute(this.image);
File image; //原始图片路径
@override
_CropImageRouteState createState() => new _CropImageRouteState();
}
class _CropImageRouteState extends State {
double baseLeft; //图片左上角的x坐标
double baseTop; //图片左上角的y坐标
double imageWidth; //图片宽度,缩放后会变化
double imageScale = 1; //图片缩放比例
Image imageView;
final cropKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: Screen.height,
width: Screen.width,
color: ThemeColors.color333333,
child: Column(
children: [
Container(
height: Screen.height * 0.8,
child: Crop.file(
widget.image,
key: cropKey,
aspectRatio: 1.0,
alwaysShowGrid: true,
),
),
RaisedButton(
onPressed: () {
_crop(widget.image);
},
child: Text('ok'),
),
],
),
));
}
Future _crop(File originalFile) async {
final crop = cropKey.currentState;
final area = crop.area;
if (area == null) {
//裁剪结果为空
print('裁剪不成功');
}
await ImageCrop.requestPermissions().then((value) {
if (value) {
ImageCrop.cropImage(
file: originalFile,
area: crop.area,
).then((value) {
upload(value);
}).catchError(() {
print('裁剪不成功');
});
} else {
upload(originalFile);
}
});
}
///上传头像
void upload(File file) {
print(file.path);
Dio dio = Dio();
dio
.post("http://your ip:port/",
data: FormData.from({'file': file}))
.then((response) {
if (!mounted) {
return;
}
//处理上传结果
UploadIconResult bean = UploadIconResult(response.data);
print('上传头像结果 $bean');
if (bean.code == '1') {
Navigator.pop(context, bean.data.url);//这里的url在上一页调用的result可以拿到
} else {
Navigator.pop(context, '');
}
});
}
}
————————————————
java实现上传寸照并剪裁_Flutter——头像上传功能,实现照片选择及裁剪相关推荐
- 前端头像上传功能实现之普通图片/头像上传 详细解析1【扩展知识FormData对象】
上传的图片/头像有两种方案上传 第一种我们不对图片做处理直接上传到服务器端,把图片上传到服务器的img文件夹当中,然后我们把图片的地址信息存储在数据库当中,用图片的时候我们直接调用地址 第二种方案是我 ...
- php的注册头像上传,用Ajax实现注册与头像上传功能
这次给大家带来用Ajax实现注册与头像上传功能,Ajax实现注册与头像上传功能的注意事项有哪些,下面就是实战案例,一起来看一下. 在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册 ...
- android自定义头像上传,android裁切图片之用于头像上传
嘛话都不说,直接贴代码,也是在网上找的代码copy出来的! 页面代码 encoding="utf-8"?> android:orientation="vertica ...
- Flutter——头像上传功能,实现照片选择及裁剪
使用两个开发库,image_picker和image_crop. 前者用来拍照或者从相册选择照片,后者用来裁剪,结果均为File类型,裁剪完成后可以直接上传文件. 先写到这儿,有时间上代码. 更新: ...
- 前端头像上传功能实现之base64图片/头像上传 详细解析2【扩展知识FileReader对象】
将图片变成base64字符串 base64是一种数据格式 就是一个字符串可以当图片来使用 // base64之将图片在前端变为base64格式 1.先获取图片 2.FileReader对象将图片进行转 ...
- Android 图片压缩、照片选择、裁剪,上传、一整套图片解决方案
1.Android一整套图片解决方案 http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820998&idx=1& ...
- 上传头像 java_Java头像上传方法
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- vue-admin-template开发(头像上传功能)
vue-admin-template开发(头像上传功能) vue-admin-template是一个后台管理系统的前端框架,提供了登录.导航栏.路由等功能,是一个强大简洁的后台管理系统的前端框架.本文 ...
- java cropper 上传_java web 网站头像上传处理 (springmvc +bootstrap+cropper)
制作头像上传.请根据您的实际需求,修改代码,不完全正确,仅供参考! 前端页面设计使用bootstrap ,头像预览和剪裁工具使用cropper 后台使用springmvc. 现在来看前端的页面设计 前 ...
最新文章
- Linux下各类TCP网络服务器的实现源代码
- 以太坊开发者工具的最新清单
- Azure Redis 系列之 Azure Redis 虚拟网络部署
- 张家口张北:加速“云计算”产业集聚
- ubuntu 10.10下搭建android开发环境 安装必要工作用软件
- mov eax,dword ptr fs:[0] 指令
- Java容器坐标起点_Java的屏幕坐标是以像素为单位,容器的左下角被确定为坐标的起点...
- Flutter之基本数据类型测试
- Xcode 6.0中彻底关闭ARC
- Wolfram 语言之父 Stephen Wolfram :编程的未来
- 问题五十:怎么用ray tracing画blobs
- 关于宁盾平台Spring框架RCE 0day漏洞修复的公告
- SourceTree 对比工具配置
- 【Element-ui】el-table大数据量渲染卡顿问题
- 第十六章:开发工具-compileall:字节编译源文件-编译单个文件
- 已解决,软件V2报错 failed to read response header > websocket: close 1005 (no status)问题
- python selenium自动化,Firefox自动下载文件以及浏览器相关配置
- linux命令行安装ifconfig,CentOS 7安装 ifconfig 管理命令
- THU-OS rCore学习总结 基于Rust + RISC-V
- SQLServer求中位数
热门文章
- [UVA1449] Dominating Patterns(AC自动机,STL,计数,神坑)
- C#实战之CAD二次开发002:绘制直线和绘制圆
- 机械革命笔记本开关键盘亮度
- 微信小程序注册流程详解
- idea无法下载源代码
- 作为一个Java初学者,怎样从一个新手快速入门?
- 所谓的flash、ddr、ufs
- webGl shader的学习记录(六):如何画出一个渐变色填充的三角形
- 8月第4周基金排行榜 | TokenInsight
- python编写系统随机产生一个数、玩家最多可以猜五次_软件工程(2019)第五次作业...