flutter 上传图片并裁剪

news2024/11/18 9:32:08

在这里插入图片描述

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

image_picker: ^0.8.7+5
image_cropper: ^4.0.1

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

<activity
    android: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.path
          if (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.coloradmin.cn/o/946692.html

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

相关文章

Golang网络编程

互联网协议介绍引入 1. 物理层&#xff08;Physical Layer&#xff09;&#xff1a; - 功能&#xff1a;物理层负责定义物理介质传输数据的方式和规范&#xff0c;它传输的是原始数据比特流。 - 协议&#xff1a;Ethernet、Wi-Fi、USB、光纤等。 - 例子&#xff1a;将…

[javaWeb]Socket网络编程

网络编程&#xff1a;写一个应用程序,让这个程序可以使用网络通信。这里就需要调用传输层提供的 api。 Socket套接字 传输层提供协议&#xff0c;主要是两个: UDP和TCP 提供了两套不同的 api&#xff0c;这api也叫做socket api。 UDP和 TCP 特点对比&#xff1a; UDP: 无连…

数据结构day05(单链表)

今日任务&#xff1a; 思维导图&#xff1a; 实现 代码&#xff1a;&#xff08;多文件&#xff09; head.h #ifndef __HEAD_H__ #define __HEAD_H__#include <stdio.h> #include <string.h> #include <stdlib.h> typedef int datatype;typedef struct Lin…

Nuxt3 与 Vue3 的 Server api 全栈开发之路

Nuxt Server Api 阅读时长&#xff1a;15分钟 本文内容&#xff1a; 国内关于Nuxt3的资料太少了&#xff0c;而Nuxt3又发布了没有多久&#xff0c;导致资料太少。本文浓缩讲解了&#xff0c;对于一个前端开发&#xff0c;上手使用 Nuxt3&#xff0c;并一个人承担前后端开发的所…

Hive3第六章:更换引擎

系列文章目录 Hive3第一章&#xff1a;环境安装 Hive3第二章&#xff1a;简单交互 Hive3第三章&#xff1a;DML数据操作 Hive3第三章&#xff1a;DML数据操作(二) Hive3第四章&#xff1a;分区表和分桶表 Hive3第五章&#xff1a;函数 Hive3第六章&#xff1a;更换引擎 文章目…

网络安全—0基础学习笔记(黑客)

一、前言 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多 google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答. 4.遇到实在搞不懂的,可以先放放,以后再来解决. …

2023年智慧政务一网通办云平台顶层设计与建设方案PPT

导读&#xff1a;原文《2023年智慧政务一网通办云平台顶层设计与建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 部分内容&#xff1a; 喜欢文章&#…

Spring——RESTful Web服务

文章目录 RESTful Web 服务介绍内容概览下载 Lombok 优化代码利器RESTful Web 服务开发运行项目并测试效果 RESTful Web 服务介绍 本节我们将开发一个简单的 RESTful Web 服务。 RESTful Web 服务与传统的 MVC 开发一个关键区别是返回给客户端的内容的创建方式&#xff1a;传…

Go操作各大消息队列教程(RabbitMQ、Kafka)

Go操作各大消息队列教程 1 RabbitMQ 1.1 概念 ①基本名词 当前市面上mq的产品很多&#xff0c;比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 Broker&#xff1a;表示消息队列服务实体Virtual Host&#x…

感觉车载测试的这一波敏捷风快过去了

敏捷&#xff0c;算不得汽车行业的原生产物&#xff0c;几年前&#xff0c;耳边很少听到这个字眼&#xff0c;基本算是在近几年传统汽车行业开始衰落的大背景下&#xff0c;而后伴随着软件从互联网等行业传进来的。 这两年&#xff0c;大家开始把敏捷谈得风生水起&#xff0c;…

用idea查看sqlite数据库idea sqlite

1、安装Database Navigator插件 2、导入数据库并查看 3、删除数据库连接 在此做个笔记

VUE环境下 CSS3+JS 实现发牌 翻牌

创建牌容器&#xff08;关键点&#xff1a;overflow&#xff1a;hidden&#xff09;&#xff1a; <div class"popup-box"></div> .popup-box {position: absolute;width: 100vw;height: 100vh;top: 0px;left: 0;overflow: hidden; } 创建每一张牌《固…

python+TensorFlow实现人脸识别智能小程序的项目(包含TensorFlow版本与Pytorch版本)(一)

pythonTensorFlow实现人脸识别智能小程序的项目&#xff08;包含TensorFlow版本与Pytorch版本&#xff09;&#xff08;一&#xff09; 一&#xff1a;TensorFlow基础知识内容部分&#xff08;简明扼要&#xff0c;快速适应&#xff09;1、下载Cifar10数据集&#xff0c;并进行…

react17:生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…

mac电脑屏幕录制Berrycast Mac屏幕录制软件

Berrycast是一款为Mac设计的优秀屏幕录制软件&#xff0c;它让屏幕录制变得简单而高效。以下是Berrycast的一些主要特点&#xff1a; 简单的用户界面&#xff1a;Berrycast拥有直观和简洁的用户界面&#xff0c;使得用户可以轻松上手。高质量的视频输出&#xff1a;Berrycast能…

电商系统架构设计系列(十):怎么能避免写出慢SQL?

上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;怎么能避免写出慢SQL&#xff1f; 我们知道&#xff0c;一个慢 SQL 就可以直接让 MySQL 瘫痪。以我个人经验总结来看&#xff0c;一般情况下系统出问题&#xff0c;大多数都是因为SQL语句的问题。掌握和用好了SQL&…

软件面试题:文件上传下载测试点

目前关于云文档的业务还是挺多的&#xff0c;相信出去面试的同学&#xff0c;大多会遇到这道高频软件测试面试题&#xff1a;文件上传下载测试点。今天向大家分享下&#xff0c;希望对大家有所启发。 一、文件上传测试点 1、文件大小 一般情况下&#xff0c;系统会设定上传文…

基于OV2640/ OV5640 的图像采集显示系统

基于OV2640/ OV5640 的图像采集显示系统系列文章目录&#xff1a; &#xff08;1&#xff09;基于 OV5640 摄像头理论知识讲解-成像和采样原理 &#xff08;2&#xff09;基于 OV5640 摄像头理论知识讲解-数字接口和控制接口 &#xff08;3&#xff09;基于 OV5640 摄像头理论知…

Mac软件删除方法?如何删除不会有残留

Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。因此&#xff0c;卸载电脑中无用的软件是优化Mac系统运行速度的最佳方式之一。Mac卸载应用程序的方式是和Windows有很大的区别&#xff0c;特别对于Mac新用户来说&#xff0c;如何无残留的卸载删…

Python Qt(七)Listview

源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from reading ui file qt_listview.ui # # Created by: PyQt5 UI code generator 5.15.9 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is # run again. Do not…