flutter 上传图片并裁剪

在这里插入图片描述

1.首先在pubspec.yaml文件中新增依赖pub.dev

image_picker: ^0.8.7+5
image_cropper: ^4.0.1

2.在Android的AndroidManifest.xml文件里面添加权限

<activityandroid:name="com.yalantis.ucrop.UCropActivity"android:screenOrientation="portrait"android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

3.在ios的Info.plist文件里面添加权限 项目根目录

    <key>NSCameraUsageDescription</key><string>这是你的自拍照</string><key>NSMicrophoneUsageDescription</key><string>用于音频插件</string><key>NSPhotoLibraryUsageDescription</key><string>用于相册选择插件</string><key>UIBackgroundModes</key><array><string>remote-notification</string></array>

4.代码实现

​​​​​​​_checkAvatar() {if (!kIsWeb) {loading(() async {final picker = ImagePicker();final pickerFile = await picker.pickImage(source: ImageSource.gallery);if (pickerFile != null) {CroppedFile? croppedImage = await ImageCropper().cropImage(sourcePath: pickerFile.path, //图片资源aspectRatio: const CropAspectRatio(ratioX: 1, ratioY: 1), //裁剪框比例uiSettings: [AndroidUiSettings(toolbarTitle: '裁剪',lockAspectRatio: true //锁定图片纵横比),IOSUiSettings(title: '裁剪',resetButtonHidden: true, //不显示重置按钮aspectRatioLockEnabled: true, //锁定图片纵横比aspectRatioPickerButtonHidden: true, //隐藏切换纵横比按钮doneButtonTitle: "完成", //confirm按钮文字cancelButtonTitle: "取消" //cancel按钮文字)]);//根据XFile对象的路径获得图片进行裁剪//裁剪完成if(croppedImage != null) {//裁剪后图片的路径String filepath = croppedImage.path;final res = await Api.getInstance().uploadAvatar(Provider.memberId, filepath);//pickerFile.pathif (res['code'] == 0) {setState(() {ThemeSnackBar.show(context, res['msg']);_getUserInfo();_user['profilePhoto'] = res['data']['url'];});} else {ThemeSnackBar.show(context, res['msg']);}print("filepath-----$filepath");}}});} else {final uploadInputElement = html.FileUploadInputElement();uploadInputElement.multiple = false;uploadInputElement.draggable = true;uploadInputElement.click();uploadInputElement.onChange.listen((event) {final file = uploadInputElement.files?.first;if (file != null) {loading(() async {final formData = html.FormData();formData.appendBlob("avatarfile", file.slice(), file.name);formData.append("memberId", Provider.memberId);Api.getInstance().uploadAvatarFromHtml(formData, (e) {if (e['code'] == 0) {setState(() {_user['profilePhoto'] = e['data']['url'];});} else {ThemeSnackBar.show(context, e['msg']);}});});}});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Deepin / UOS 安装自带的Qt

Deepin / UOS 安装自带的Qt 安装Qt版本可从官网下载也可以使用Deepin / UOS 自己维护的Qt版本&#xff0c;好处是针对Deepin/UOS系统进行了针对性的优化&#xff0c;比如QtCreator的界面和系统UI保持一致。 查询Qt版本及是否安装 sudo apt policy qtbase5-devsudo apt polic…

C#添加WebApi,配置Swagger

1、创建一个WebAPI项目 下载、安装、引入【Swashbuckle.AspNetCore】包 右击【解决方案】&#xff0c;然后点击【管理Nuget包】&#xff0c;搜索【Swashbuckle.AspNetCore】包 2、配置Swagger中间件 在【Startup.cs】文件中的【ConfigureService】类中添加如下代码。 在【Sta…

第十二章 YOLO的部署实战篇(中篇)

cuda教程目录 第一章 指针篇 第二章 CUDA原理篇 第三章 CUDA编译器环境配置篇 第四章 kernel函数基础篇 第五章 kernel索引(index)篇 第六章 kenel矩阵计算实战篇 第七章 kenel实战强化篇 第八章 CUDA内存应用与性能优化篇 第九章 CUDA原子(atomic)实战篇 第十章 CUDA流(strea…

Spring AOP与静态代理/动态代理

文章目录 一、代理模式静态代理动态代理代理模式与AOP 二、Spring AOPSping AOP用来处理什么场景jdk 动态代理cglib 动态代理面试题&#xff1a;讲讲Spring AOP的原理与执行流程 总结 一、代理模式 代理模式是一种结构型设计模式&#xff0c;它允许对象提供替代品或占位符&…

肖sir__设计测试用例方法之边界值03_(黑盒测试)

设计测试用例方法之边界值 边界点定义 上点&#xff1a;边界上的点 离点&#xff1a;离上点最近的点&#xff08;即上点左右两边最邻近的点&#xff09; 内点&#xff1a;在域范围内的点 案例&#xff1a;qq号&#xff1a;5-12位 闭区间&#xff1a; 离点&#xff1a;5 位 &…

KC705开发板——MGT IBERT测试记录

本文介绍使用KC705开发板进行MGT的IBERT测试。 KC705开发板 KC705开发板的图片如下图所示。FPGA芯片型号为XC7K325T-2FFG900C。 MGT MGT是 Multi-Gigabit Transceiver的缩写&#xff0c;是Multi-Gigabit Serializer/Deserializer (SERDES)的别称。MGT包含GTP、GTX、GTH、G…

vb工业企业进销存管理系统设计与实现

前言 工业企业管理系统是一个工业企业不可缺少的部分,它的内容对于工业企业的决策者和管理者来说都至关重要,所以工业企业管理系统应该能够为用户提供充足的信息和快捷的销售,查询手段。但一直以来人们使用传统人工的方式管理文件信息,这种管理方式存在着许多缺点,如:效率低、…

Calico IP In IP模拟组网

Calico IP In IP模拟组网 网络架构 模拟组网 先在k8s-master-1节点执行如下命令&#xff1a; # 创建veth-pair设备对ip link add veth1 type veth peer name eth0# 创建ns1网络命名空间ip netns add ns1# 将eth0网卡插入ns1网络命名空间ip link set eth0 netns ns1# 为ns1网…

CC-TDOB01 CC-TDIL01 有效地监控和管理热工设备

CC-TDOB01 CC-TDIL01 有效地监控和管理热工设备 新兴的互联工厂技术是霍尼韦尔启动其43的亮点注册营养师霍尼韦尔用户组(HUG)美洲研讨会&#xff0c;重点是向制造商展示数字化转型如何帮助他们实现更高水平的高性能。 来自石油和天然气、化工、纸浆和造纸以及金属和采矿行业的…

全国唯一一所初试考Java的学校!平均300分拿下

苏州科技大学 考研难度&#xff08;☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1187字&#xff0c;预计阅读&#xff1a;3分钟 2023考情概况 苏州科技…

大数据组件Sqoop-安装与验证

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

19-springcloud(上)

一 微服务架构进化论 单体应用阶段 (夫妻摊位) 在互联网发展的初期&#xff0c;用户数量少&#xff0c;一般网站的流量也很少&#xff0c;但硬件成本较高。因此&#xff0c;一般的企业会将所有的功能都集成在一起开发一个单体应用&#xff0c;然后将该单体应用部署到一台服务器…

python中的符号 ->和...

1、->一般出现在python函数定义的函数名后面&#xff0c;为函数添加元数据,描述函数的返回类型&#xff0c;也可以理解为给函数添加注解。 def sub(x:int, y:int) -> int:return x - y这里面&#xff0c;元数据表明了函数的返回值为int类型。Python解释器不会对这些注解…

uniapp 开发App 网络异常如何处理

我对该问题思考的不是很清楚&#xff0c;目前只想到了基本的解决方案 第一、客户端的网络异常&#xff08;断网&#xff09; 1. 断网情况 一定要弹出信息提示&#xff0c;目前最好的解决方式就是在uni.request封装的统一方法中写提示 //1. 封装的网络请求 async function se…

实现Android APK瘦身99.99%

摘要&#xff1a; 如何瘦身是 APK 的重要优化技术。APK 在安装和更新时都需要经过网络下载到设备&#xff0c;APK 越小&#xff0c;用户体验越好。本文作者通过对 APK 内在机制的详细解析&#xff0c;给出了对 APK 各组成成分的优化方法及技术&#xff0c;并实现了一个基本 APK…

【PyGame/PyQy5】get-start 快速入门

1.windows、linux&#xff0c;mac 安装python3 2.PC系统安装pygame, 指令&#xff1a;pip install pygame 3. 保存如下文件&#xff1a; test_game.py 4.PC上运行 python test_game.py import pygame# 初始化Pygame pygame.init()# 创建游戏窗口 window pygame.display.s…

【面试经典150题】跳跃游戏Ⅱ

题目链接 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i]i j < n 返回到达 nums[n…

SeamlessM4T—Massively Multilingual Multimodal Machine Translation

本文是LLM系列的文章&#xff0c;针对《SeamlessM4T—Massively Multilingual & Multimodal Machine Translation》的翻译。 SeamlessM4T&#xff1a;大规模语言多模态机器翻译 摘要1 引言2 多模态翻译的社会技术维度2.12.22.3 3 SeamlessAlign&#xff1a;自动创建语音对…

产品经理如何进行需求管理

产品经理在进行需求管理时&#xff0c;可以遵循以下步骤&#xff1a; 1. 确定需求目标&#xff1a;明确产品的愿景和目标&#xff0c;确定需求管理的方向和重点。 2. 收集需求&#xff1a;与利益相关者&#xff08;包括用户、业务部门、技术团队等&#xff09;沟通&#xff0c;…

Spring Boot多数据源配置运行报错:No operations allowed after connection closed连接异常的解决

上一篇文章我们讲了如何配置多数据源&#xff0c;但是配置在使用一段时间之后&#xff0c;查询数据库会发生报错&#xff1a;No operations allowed after connection closed。 一、问题原因&#xff1a; 经过排查发现是因为MySQL5.0以后针对超长时间DB连接做了一个处理&#…