【uniapp+vue3/vue2】ksp-cropper高性能图片裁剪工具,详解

效果图:

在这里插入图片描述

1、ksp-cropper是hbuilder插件市场中的一款插件,兼容vue2和vue3

ksp-cropper插件安装地址,直接点击跳转

2、插件用法相对简单
(1)只要url有值就会显示插件,为空就会隐藏插件
(2)点击确认按钮事件和点击取消按钮事件中,拿到临时路径和清空临时路径
在这里插入图片描述
3、调试过程中遇到的两个小问题
(1)打开插件的时候没有占满整个页面—ksp-cropper不需要包裹在有类名的标签中,单独放就行
(2)点击确认按钮之后还是触发uni.chooseImage事件-----ksp-cropper不要包裹在有点击事件的标签中,单独放就行

4、代码:

<image style="width: 30rpx; height: 25rpx" :src="data.avatar"@click="selectImage"></image>
<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="data.url"@cancel="cancelSelect" @ok="updateAvatarImg"></ksp-cropper>
<script lang="ts" setup>import { reactive, getCurrentInstance, computed, ref } from "vue";const data = reactive({
avatar:'',//要显示的头像
url:'',//插件的url})
//点击头像选择相册里的照片function selectImage() {uni.chooseImage({count: 1,success: (res) => {data.url = res.tempFilePaths[0];//给插件的url赋值,插件就会显示},});}
function selectedImage(ev) {//url设置为空,隐藏控件data.url = ''return new Promise((resolve, reject) => {uni.showLoading({mask: true,title: "上传头像中",});const uploadOptions = {url: baseurl+ "common/upload",filePath: ev.path,//插件返的临时路径name: "Image",header: {token: uni.getStorageSync("token"),},};//调用上传接口,将临时路径转换为https开头的图片格式uni.uploadFile({...uploadOptions,success: async (res) => {try {const { result } = JSON.parse(res.data);await updateAvatar(result);	//调用修改接口,实现修改头像				uni.hideLoading();resolve();} catch (error) {				console.error("上传失败", error);reject(error);}},});});}

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

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

相关文章

【FI】FB02中Coding Block字段如何设置为可修改

本文基于S/4 HANA 2022 关于FB02下会计凭证行上的可更改字段的控制&#xff0c;以前以为只受“凭证明细行更变规则”&#xff08;OB32&#xff09;的影响。 今天碰到了Coding Block字段的情况&#xff0c;它不受OB32的影响&#xff0c;而是受表TCOBX控制。 如何确认该字段是Cod…

树专题 —— 二叉搜索树和中序遍历

大家好&#xff0c;我是 方圆。我准备把树写成一个专题&#xff0c;包括二叉搜索树、前序、中序、后序遍历以及红黑树&#xff0c;我也想试试能不能将红黑树写好。 本篇是关于二叉搜索树&#xff0c;也是所有后续学习的基础&#xff0c;其中会涉及前序、中序、后序遍历&#x…

css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版

文章 <div class"contentBox"><p>这是一篇范文——仅供测试使用</p><p>With the coming of national day, I have a one week holiday. I reallyexpect to it, because it want to have a short trip during these days. Iwill travel to Ji…

集合的使用

List集合的使用 /* * List: 是Collection的子接口&#xff0c;列表的意思&#xff0c;可以认为有序列表 * 特性:1、放入的元素是有序的&#xff0c;2、元素可以重复 * List是接口不能实例化&#xff0c;如果想使用列表集合&#xff0c;必须要通过它的实现类实例化对象来使用 * …

PTL货位指引标签为仓储管理打开新思路

PTL货位指引标签是一种新型的仓储管理技术&#xff0c;它通过LED灯光指引和数字显示&#xff0c;为仓库管理带来了全新的管理思路和效率提升&#xff0c;成为现代物流仓库管理中的重要工具。 首先&#xff0c;PTL货位指引标签为仓储管理业务带来了管理新思路。传统的仓库管理中…

17 HTTPDNS详解

前情概要&#xff1a; 我们知道 DNS 的两项功能&#xff0c;第一是根据名称查到具体的地址&#xff0c;另外一个是可以针对多个地址做负载均衡&#xff0c;而且可以在多个地址中选择一个距离你近的地方访问。然而有时候,DNS也会出现偏差&#xff0c;没有指定离你近的ip&#x…

数据结构:AVL树的旋转(平衡搜索二叉树)

1、AVL树简介 AVL树是最先发明的自平衡二叉查找树。在AVL树中任何节点的两个子树的高度最大差别为1&#xff0c;所以它也被称为高度平衡树。增加和删除可能需要通过一次或多次树旋转来重新平衡这个树。AVL树得名于它的发明者G. M. Adelson-Velsky和E. M. Landis&#xff0c;他们…

flutter项目引入本地静态图片资源并展示

想要在flutter中引入静态资源&#xff0c;需要配置pubspec.yaml&#xff0c;将本地的静态资源添加到assets下面&#xff1a; 然后在flutter引入这些静态资源&#xff1a; Image.asset("images/squick.png") 就可以在app中看到这个图片了&#xff1a; 也可以使用网…

falsk框架中安装flask-mysqldb报错解决方案

错误示例 我的是py37版本&#xff0c;无法直接安装flask-mysqldb pip install flask-mysqldb报错如下 解决方案 先去第三方库 https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient 下载mysqlclient 这个是我的版本 mysqlclient-1.4.6-cp37-cp37m-win_amd64.whl 下…

[算法日志]图论刷题 沉岛思想的运用

[算法日志]图论刷题: 沉岛思想的运用 leetcode 695 岛屿最大面积 给你一个大小为 m x n 的二进制矩阵 grid . 岛屿 是由一些相邻的 1 (代表土地) 构成的组合, 这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻. 你可以假设 grid 的四个边缘都被 0&#xff08…

贪心,队列,运算符重载,牛客:连环爆炸

C-连环爆炸_第四届辽宁省大学生程序设计竞赛&#xff08;正式赛&#xff09;&#xff08;重现赛&#xff09;兴安真人 (nowcoder.com) 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空…

软考高级系统架构设计师系列案例考点专题六:面向服务架构设计

软考高级系统架构设计师系列案例考点专题六:面向服务架构设计 一、面向服务架构设计内容大纲二、SOA概述和发展三、SOA和微服务的区别四、SOA的参考架构五、SOA主要协议和规范六、SOA设计标准和原则七、SOA设计模式八、SOA构建和实施一、面向服务架构设计内容大纲 SOA概述和发…

C++ [继承]

本文已收录至《C语言和高级数据结构》专栏&#xff01; 作者&#xff1a;ARMCSKGT 继承 前言正文继承的概念及定义继承的概念继承的定义重定义 基类和派生类对象赋值转换派生类中的默认成员函数隐式调用显示调用 继承中的友元与静态成员友元静态成员 菱形继承概念 虚继承原理继…

java中对象的引用是什么?

引用和指向 例如&#xff1a; new Student(); 代表创建了一个Student对象&#xff0c;但是也仅仅是创建了一个对象&#xff0c;没有办法访问它。 为了访问这个对象&#xff0c;会使用引用来代表这个对象 Student s new Student(); s这个变量是Student类型&#xff0c;又叫做引…

react组件通信

目录 前言&#xff1a; 父子组件通信 子父组件通信 兄弟组件通信 总结 前言&#xff1a; React是一种流行的JavaScript库&#xff0c;用于构建现代化的、高性能的Web应用程序。在React中&#xff0c;组件是代码的构建块。组件通信是React中一个非常重要的概念&#xff0c;…

Kafka反序列化RCE漏洞(CVE-2023-34040)

漏洞描述 Spring Kafka 是 Spring Framework 生态系统中的一个模块&#xff0c;用于简化在 Spring 应用程序中集成 Apache Kafka 的过程&#xff0c;记录 (record) 指 Kafka 消息中的一条记录。 受影响版本中默认未对记录配置 ErrorHandlingDeserializer&#xff0c;当用户将…

Bean的四种实例化方式以及BeanFactory和FactoryBean的区别

2023.11.8 Spring为Bean提供了多种实例化方式&#xff0c;通常包括4种方式。 第一种&#xff1a;通过构造方法实例化第二种&#xff1a;通过简单工厂模式实例化第三种&#xff1a;通过factory-bean实例化第四种&#xff1a;通过FactoryBean接口实例化 通过构造方法实例化 创…

android display 笔记(三)WMS

用来记录学习wms&#xff0c;后续会一点一点更新。。。。。。 代码&#xff1a;android14 WMS是在SystemServer进程中启动的 在SystemServer中的main方法中&#xff0c;调用run方法。 private void run() { // Initialize native services.初始化服务&#xff0c;加载andro…

FreeRTOS_空闲任务

目录 1. 空闲任务详解 1.1 空闲任务简介 1.2 空闲任务的创建 1.3 空闲任务函数 2. 空闲任务钩子函数详解 2.1 钩子函数 2.2 空闲任务钩子函数 3. 空闲任务钩子函数实验 3.1 main.c 空闲任务是 FreeRTOS 必不可少的一个任务&#xff0c;其他 RTOS 类系统也有空闲任务&a…

广东开放大学:电大搜题助力学子迎考利器

近年来&#xff0c;广东开放大学一直致力于为广大学子提供优质的教育资源和学习服务。作为一所专注于远程教育的学府&#xff0c;广东开放大学不仅拥有雄厚的师资力量和丰富的教育经验&#xff0c;还致力于创新教学手段&#xff0c;为学生提供更便捷、高效的学习体验。在这个信…