uniapp uview 头像裁剪组件的问题

最新推荐文章于 2024-05-15 15:10:12 发布
原创 最新推荐文章于 2024-05-15 15:10:12 发布
· 628 阅读 · 5 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

当切换页面频繁进出头像裁剪组件u-avatar-cropper.vue   获取同一个设备信息时会出现两种不同的高度具体如下

 

 

导致 头像裁剪页面高度出现问题，下方按钮被canvas组件遮盖了

 

解决方法

 在进入这个页面前的一个页面做如下代码操作

直接将设备信息提前获取，保存到缓存中

onReady() {
			if(!uni.getStorageSync('rectInfo')){
				let rectInfo = uni.getSystemInfoSync();
				uni.setStorageSync('rectInfo',rectInfo)
			}
			
		},

在u-avatar-cropper.vue 组件中，直接从缓存中拿信息

uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端兼容H5网站、支付宝/微信小程序、安卓App、苹果App、nvue
王二红
11-08 1万+
uniapp，H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue，裁剪，官方图片上传裁剪并上传到后端组件，uni-app实现简单易用的头像裁剪上传组件，uniapp头像美化图片组件，uniapp如何实现图片上传后裁剪功能，裁剪图片，裁剪头像，uniapp头像裁剪带上传功能的组件，头像上传裁切剪切组件，uni-app实现图片的上传和裁剪，uni-app使用图片裁剪插件，uniApp实现选择图片裁剪设置用户头像，vueuni-app裁剪图片(裁剪头像)插件，uni-app实现上传图片裁剪效果
uniapp-商城-2-uView组件以及uniapp组件的引入
weixin_43613170的博客
03-30 957
该库是一个ui组件库，也可以结合 阿里巴巴矢量图使用。
使用uview UI和uni-app框架实现图片裁剪功能和上传
一起探索 !
12-23 4601
使用uview UI和uni-app框架实现图片裁剪功能和上传
uniapp图片（头像）裁剪（vue3+ksp-cropper）
qq_52850749的博客
02-02 1773
赋值完成后操作后点击确认onok进行裁剪，将cropperUrl置空，去调用上传的接口得到完整的地址，成功得到完整地址后再去调用修改图片（头像）地址即可。当我们使用uniapp自带的上传图片时将cropperUrl进行赋值，头像裁剪就会出来。数据层，标签里面的 :url如果为空插件就默认不显示，有地址裁剪就会自己出来。参数根据自己的需求可以自己设置，头像裁剪记得用fixed，这个是固定尺寸。完结，撒花，有任何问题请私信踢我或者评论区留言！将插件安装到项目中，这个下载插件的官方地址。
vue 微信小程序 uniapp 微信头像上传裁剪功能（组件代码）
maoge_666的博客
05-15 765
vue 微信小程序 uniapp 微信头像上传裁剪功能（组件代码）
vue 微信小程序 uniapp 微信头像上传裁剪功能
maoge_666的博客
05-15 950
vue 微信小程序 uniapp 微信头像上传裁剪功能
uni-app + uView（AvatarCropper 头像裁剪） 发布 H5 遇到的坑
Pure_Sunshine的博客
01-14 4374
uni-app + uView 发布 H5 AvatarCropper 头像裁剪 base64 wx.getFileSystemManager().readFileSync() API `getFileSystemManager` is not yet implemented
uniapp uview裁剪组件源码修改(u-avatar-cropper)，裁出可自定义固定大小图片
m0_49083276的博客
12-29 1747
【代码】uniapp uview裁剪组件源码修改，裁出固定大小图片。
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...
上传头像可调整大小 裁剪功能
06-28
flash上传头像 可调正头像大小 裁剪功能 须要的朋友可以下来看看
VueAvatarCropper一个简单而优雅的头像裁剪和上传插件
08-10
Vue Avatar Cropper一个简单而优雅的头像裁剪和上传插件
uni-app的图片裁剪nice-cropper.rar
02-22
uni-app的图片裁剪nice-cropper，简单的图片裁剪插件进行了一次封装，修复了图片太小加载后的bug等等。
控件ClipImageView裁剪头像图片
02-22
Android裁剪图片控件，可用于显示用户头像，用于截取选择的图片所需要的部分图片内容
基于uniapp+uview2.0的物业管理系统源码出售，包含缴费、量房、商城等功能
09-26
与uview2.0组件库的结合，使得该系统不仅拥有跨平台的能力，还具备了丰富的UI组件，提升了用户体验。 系统中的物业缴费功能是物业管理的基础，它为业主提供了便捷的在线缴费渠道，支持多种支付方式，使缴费过程更加...
(源码)基于uniapp和uview的自定义组件开发项目.zip
03-23
# 基于uniapp和uview的自定义组件开发项目 ## 项目简介 本项目是基于uniapp和uview框架的自定义组件开发项目，借助这两个框架的优势，可用于开发APP和各类小程序的自定义组件，默认支持uview UI库，为开发者提供了...
uniapp vue3 裁剪头像(ksp-cropper) 支持旋转 和 缩放
tengyuxin的博客
11-01 2894
我的使用环境 uniapp vue3 移动端 Android 真机测试。具体我使用后的效果图如下：下面我主要是详细的补充一下。
uniapp图片头像剪裁kpsImageCutter
weixin_45446474的博客
01-23 1202
图片裁剪工具 - DCloud 插件市场 单页面方式引入在vue页面文件引入 import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue"; export default { components: {kpsImageCutter}, } <button @tap="chooseImage()">选择图片</button> <image c
#uni-app# u-avatar-cropper实现选择图片裁剪，设置用户头像uview （附源码）
ZHENGCHUNJUN的博客
10-14 5497
（3）选择图片，裁剪图片 首先我们需要在模态框处，设置点击事件，唤起操作菜单，然后进行修改操作菜单里面的参数 然后在操作菜单这个组件设置点击事件，接入uni.chooseImage这个api,接成功以后，再将将上传的图片赋值给我们定义好的变量数组， 接着，我们再使用裁剪插件，监听裁剪 ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水htt.
view class="wrapper"> <!-- 个人资料 --> <view> <view class="top"> <view class="center"> <view class="center_top"> <view class="center_img"> <!-- 这里可以放自己的静态头像 --> <uv-avatar :text="name" fontSize="50" size="large" randomBgColor></uv-avatar> <!-- <open-data type="userAvatarUrl" class="user_head"></open-data> --> </view> <view class="center_info"> <view class="center_name"> <!-- 这里可以放自己的名称图片 --> <view>{{result.realname}}</view> </view> <view class="center_vip"> <image class="rank_icon" src="/static/vip.png" /> <view class="vip_text"> <text>{{result.uname}}</text> </view> </view> </view> </view> </view> </view> </view>
最新发布
04-12
### uni-app 中 `uv-avatar` 组件的使用方法及布局实现 #### 1. 安装与引入 在项目中使用 `uv-avatar` 组件前，需确保已安装对应的 UI 库。如果未安装，则可以通过 npm 或手动下载的方式完成。 对于本案例中的组件库 `uv-ui` 和 `uni-ui`[^1]，可以按照以下方式进行安装： ```bash npm install @dcloudio/uni-ui npm install uv-ui ``` 随后，在项目的入口文件（如 main.js）中全局注册这些组件： ```javascript import uView from '@/unpackage/uv-ui-tools/libs/uview/index'; Vue.use(uView); ``` --- #### 2. 基础用法 以下是 `uv-avatar` 的基础配置及其常用属性说明： | 属性名 | 类型 | 默认值 | 描述 | |--------------|----------|-------------|----------------------------------------------------------------------| | src | String | "" | 头像图片地址 | | size | Number | 40 | 图片大小(px)，可设置具体数值 | | shape | String | "circle" | 形状，可选值："circle"(圆形)、"square"(方形) | | mode | String | "aspectFit" | 裁剪模式，同 image 标签的 mode | 示例代码如下： ```html <template> <view class="container"> <!-- 圆形头像 --> <uv-avatar :src="avatarUrl" size="60" shape="circle"></uv-avatar> <!-- 方形头像 --> <uv-avatar :src="avatarUrl" size="60" shape="square"></uv-avatar> </view> </template> <script> export default { data() { return { avatarUrl: "https://example.com/avatar.jpg" }; } }; </script> <style scoped> .container { display: flex; justify-content: space-around; align-items: center; } </style> ``` 上述代码展示了如何创建一个圆形和方形的头像，并设置了具体的尺寸。 --- #### 3. 动态绑定与事件处理 除了静态展示外，还可以动态绑定用户的头像链接并监听点击事件。例如： ```html <template> <view class="container"> <uv-avatar :src="user.avatar" size="80" shape="circle" @click="handleClick(user.id)" ></uv-avatar> </view> </template> <script> export default { data() { return { user: { id: 1, name: "张三", avatar: "https://example.com/user_avatar.png" } }; }, methods: { handleClick(userId) { console.log(`User ID clicked: ${userId}`); } } }; </script> ``` 此部分实现了当用户点击头像时触发回调函数的功能。 --- #### 4. 自定义样式与布局调整 为了更好地适配不同场景下的需求，可通过 CSS 对齐方式或容器结构调整来优化布局效果。比如将多个头像水平排列或者堆叠显示。 ##### 水平排列 通过 Flexbox 实现多头像横向分布： ```html <template> <view class="avatars-container"> <uv-avatar v-for="(item, index) in avatars" :key="index" :src="item.src" size="50" shape="circle"></uv-avatar> </view> </template> <script> export default { data() { return { avatars: [ { src: "https://example.com/avatar1.jpg" }, { src: "https://example.com/avatar2.jpg" }, { src: "https://example.com/avatar3.jpg" } ] }; } }; </script> <style scoped> .avatars-container { display: flex; gap: 10px; /* 设置间距 */ margin-top: 20px; } </style> ``` ##### 堆叠显示 利用绝对定位叠加多个头像图标： ```html <template> <view class="stacked-avatars"> <uv-avatar :src="avatars[0].src" size="70" shape="circle" style="z-index: 3;"></uv-avatar> <uv-avatar :src="avatars[1].src" size="60" shape="circle" style="position: absolute; top: 10px; left: 10px; z-index: 2;"></uv-avatar> <uv-avatar :src="avatars[2].src" size="50" shape="circle" style="position: absolute; top: 20px; left: 20px; z-index: 1;"></uv-avatar> </view> </template> <script> export default { data() { return { avatars: [ { src: "https://example.com/avatar1.jpg" }, { src: "https://example.com/avatar2.jpg" }, { src: "https://example.com/avatar3.jpg" } ] }; } }; </script> <style scoped> .stacked-avatars { position: relative; width: fit-content; height: fit-content; } </style> ``` 以上两种方案分别适用于不同的业务逻辑下对界面美观度的要求。 --- #### 5. 注意事项 - **跨平台兼容性**：由于 UniApp 支持 H5、小程序以及 App 端开发，因此需要注意某些特定平台上可能存在的差异表现。 - **性能优化**：大量加载远程图片资源可能会增加页面渲染时间，建议采用懒加载机制减少初始耗时[^2]。 --- ### 问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值