当前位置: 首页 > news >正文

uniapp uview裁剪组件源码修改(u-avatar-cropper),裁出可自定义固定大小图片

u-avatar-cropper修改后

<template><view class="index"><!-- {{userinfo}} --><view class="top"><view class="bg"><image src="../../static/electronic_card/bg.png"></image></view></view><view class="main"><view class="card" ref="card"><image src="../../static/card/bg.png" mode=""></image><view class="content"><view class=""><view class="logo"><image src="../../static/card/logo.png" mode=""></image></view><view class="txt">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:{{userinfo.name}}<br>班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:{{userinfo.class}}<br>联系方式:{{userinfo.phone}}<br>入学年份:{{userinfo.entrance_year}}<br>No:{{userinfo.code}}</view></view><view class="img"><view class="" v-if="userinfo.photo" class="photo" @click="chooseAvatar"><image :src="userinfo.photo" mode="widthFix" style="width: 100%;"></image></view><view class="applyschool-onlod-phops" @click="chooseAvatar" v-else><view class="phops-img"><image src="../../static/applyschool/add_photo.png"></image></view><!-- <text>用于生成入校电子卡</text> --></view></view></view></view></view><view class="downbtn" @click="exportCardAsImage">查看与保存卡片</view><u-modal v-model="show" @confirm="confirmChange" confirm-color="#781C27" :content="content"></u-modal></view>
</template><script>import html2canvas from "html2canvas"import utlis from '../../common/utils.js'export default {mixins: [utlis],data() {return {userinfo: {},show: false,content: '未认证',url: ""}},onLoad() {this.getUserInfo()uni.$on('uAvatarCropper', path => {this.avatar = path;// 可以在此上传到服务端uni.uploadFile({url: this.$configs.$UP_URL,filePath: path,name: 'file',complete: (res) => {console.log("上传照片成功", JSON.parse(res.data).data.url);this.url = JSON.parse(res.data).data.urlthis.$http.post(this.$configs.api.updatePhoto, {'photo': this.url}).then(res => {this.getUserInfo()})}});})},onUnload() {uni.$off('uAvatarCropper')},methods: {exportCardAsImage() {const cardElement = this.$refs.card.$el;console.log(this.$refs.card);html2canvas(cardElement).then((canvas) => {const imageData = canvas.toDataURL('image/png');console.log("图片", imageData);this.pic(imageData)});},pic(src) {uni.previewImage({urls: Array.isArray(src) ? src : [src],current: '',success: function(res) {},fail: function(res) {},complete: function(res) {},});},chooseAvatar() {//裁剪组件this.$u.route({url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',params: {destWidth: 182,destHeight: 230,rectWidth: 182,rectHeight: 230,fileType: 'jpg',}})},//获取校友卡信息async getUserInfo() {let res = await this.$http.post(this.$configs.api.aluminget, {'uid': this.uid})this.userinfo = res.data.data.infoif (res.data.code !== 200) {uni.showModal({title: '提示',confirmColor: '#781C27',showCancel: false,content: res.data.message,success: function(res) {if (res.confirm) {uni.navigateTo({url: '../index/index'})}}});}if (!res.data.data.info.status) {res.data.data.info.status = 0}let contnerArr = ['您还未认证成为校友','审核通过','待审核','审核不通过'];if (res.data.data.info.status != 1) {this.show = true;this.content = contnerArr[res.data.data.info.status]}},confirmChange() {uni.navigateBack()}}}
</script><style scoped lang="scss">page {background: #F9F9F9;}.index {width: 100vw;display: flex;flex-direction: column;// justify-content: center;align-items: center;}.top {width: 100vw;.bg {position: relative;z-index: 1;image {height: 554rpx;width: 100vw;}}}.applyschool-onlod-phops {width: auto;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;float: left;margin-top: -30rpx;}.main {position: relative;z-index: 2;margin-top: -100rpx;width: 716rpx;height: 402rpx;background: rgba(175, 0, 5, 0.78);border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;overflow: hidden;// background: url("../../static/card/bg.png") repeat fixed center;.card {position: relative;z-index: 1;padding: 30rpx;&>image {position: absolute;z-index: 1;top: 0;left: 0;width: 716rpx;height: 402rpx;}.content {position: relative;z-index: 2;display: flex;justify-content: space-between;.logo {image {width: 296rpx;height: 72rpx;}}.txt {line-height: 50rpx;font-size: 24rpx;color: #FFFFFF;font-weight: 400;}.img {display: flex;// justify-content: center;align-items: center;margin-right: 88rpx;image {width: 182rpx;height: 230rpx;}}}}}.downbtn {margin: 0;width: 690rpx;height: 104rpx;background: #AF0005;border-radius: 72rpx 72rpx 72rpx 72rpx;opacity: 1;color: #FFFFFF;font-weight: 500;line-height: 104rpx;text-align: center;margin-top: 76rpx;}.photo {width: 182rpx;height: 230rpx;background-color: #fff;display: flex;align-items: center;}
</style>

使用

<view class="" class="photo" @click="chooseAvatar"><image :src="userinfo.photo" mode="widthFix" style="width: 100%;"></image></view>
	onLoad() {uni.$on('uAvatarCropper', path => {this.avatar = path;// 可以在此上传到服务端uni.uploadFile({url: this.$configs.$UP_URL,filePath: path,name: 'file',complete: (res) => {console.log("上传照片成功", JSON.parse(res.data).data.url);}});})},
chooseAvatar() {//裁剪组件this.$u.route({url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',params: {destWidth: 182,destHeight: 230,rectWidth: 182,rectHeight: 230,fileType: 'jpg',}})},

相关文章:

uniapp uview裁剪组件源码修改(u-avatar-cropper),裁出可自定义固定大小图片

u-avatar-cropper修改后 <template><view class"index"><!-- {{userinfo}} --><view class"top"><view class"bg"><image src"../../static/electronic_card/bg.png"></image></view&g…...

【机器学习前置知识】Beta分布

Beta分布与二项分布的关系 Beta分布与二项分布密切相关,由二项分布扩展而来,它是用来描述一个连续型随机变量出现的概率的概率密度分布,表示为 X X X~ B e t a ( a , b ) Beta(a,b) Beta(a,b) , a 、 b a、b a、b 是形状参数。Beta分布本质上也是一个概率密度函数,只是这…...

Notepad++批量更改文件编码格式及文档格式

背景&#xff1a; 在项目中遇到Windows平台VS的MSVC编译不识别Unix下UTF-8编码导致的编译失败问题。需要将Unix下的UTF-8转为UTF-8-BOM格式。网上找了些方式&#xff0c;之后又深入探究了下文档转换的可能性&#xff0c;共享给大家。&#xff08;当然Windows和Unix平台代码格式…...

Linux驱动开发学习笔记6《蜂鸣器实验》

目录 一、蜂鸣器驱动原理 二、硬件原理分析 三、实验程序编写 1、 修改设备树文件 &#xff08;1&#xff09;添加pinctrl节点 &#xff08;2&#xff09;添加BEEP设备节点 &#xff08;3&#xff09;检查PIN 是否被其他外设使用 2、蜂鸣器驱动程序编写 3、编写测试AP…...

鸿蒙(HarmonyOS 3.1) DevEco Studio 3.1开发环境汉化

鸿蒙&#xff08;HarmonyOS 3.1&#xff09; DevEco Studio 3.1开发环境汉化 一、安装环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、设置过程 打开IDE&#xff0c;在第一个菜单File 中找到Settings...菜单 在Setting...中找到Plugins…...

毫米波雷达:从 3D 走向 4D

1 毫米波雷达已广泛应用于汽车 ADAS 系统 汽车智能驾驶需要感知层、决策层、执行层三大核心系统的高效配合&#xff0c;其中感知层通过传感器探知周围的环境。汽车智能驾驶感知层将真实世界的视觉、物理、事件等信息转变成数字信号&#xff0c;为车辆了解周边环境、制定驾驶操…...

CENTOS docker拉取私服镜像

概述 docker的应用越来越多&#xff0c;安装部署越来越方便&#xff0c;批量自动化的镜像生成和发布都需要docker镜像的拉取。 centos6版本太老&#xff0c;docker的使用过程中问题较多&#xff0c;centos7相对简单容易。 本文档主要介绍centos系统安装docker和拉取docker私…...

【前端面经】即时设计

目录 前言一面git 常见命令跨窗口通信vue 响应式原理发布订阅模式翻转二叉树Promise.all()扁平化数组面试官建议 二面Event Loop 原理Promise 相关css 描边方式requestAnimationReact 18 新特性JSX 相关react 输出两次函数式编程React 批处理机制http请求头有哪些本地存储性能优…...

前端三件套html/css/js的基本认识以及示例程序

简介 本文简要讲解了html,css,js.主要是让大家简要了解网络知识 因为实际开发中很少直接写html&css,所以不必过多纠结,了解一下架构就好 希望深度学习可以参考MDN和w3school HTML 基础 HTML (Hyper Text Markup Language) 不是一门编程语言,而是一种用来告知浏览器如…...

云计算:OpenStack 配置云主机实例的存储挂载并实现外网互通

目录 一、实验 1. 环境 2.配置存储挂载 3.云主机实例连接外部网络&#xff08;SNAT&#xff09; 4.外部网络连接云主机实例&#xff08;DNAT&#xff09; 二、问题 1.云主机 ping 不通外部网络 2.nova list 查看云主机列表报错 3.nova list 与 virsh list --all有何区…...

python/selenium/jenkins整合

1、新建python项目&#xff0c;专门写selenium代码&#xff0c;建议用pytest框架写。 2、把代码上传到代码库中。 3、环境配置&#xff1a; 3.1 在跑jenkins的机器上配置好python环境&#xff0c;需要python --version能在任何地方运行&#xff08;配置好系统环境变量&#…...

华为路由器ACL操作SSH接口

ACL的定义 访问控制列表&#xff08;Access Control Lists&#xff0c;ACL&#xff09;是应用在路由器接口的指令列表。这些指令列表用来告诉路由器哪些数据包可以收、哪些数据包需要拒绝。至于数据包是被接收还是拒绝&#xff0c;可以由类似于源地址、目的地址、端口号等的特…...

Flutter 三点三:Dart Stream

Stream Stream用于接收异步事件Stream 可以接收多个异步事件Stream.listen()方法返回StreamSubscription 可用于取消事件订阅&#xff0c;取消后&#xff0c;不再接收事件 基本使用 Stream.fromFutures([Future.delayed(Duration(seconds: 1),(){return "事件1";})…...

centos 防火墙 设置 LTS

centos 防火墙 设置 LTS https://blog.csdn.net/m0_58805648/article/details/130671008...

SAP缓存 表缓存( Table Buffering)

本文主要介绍SAP中的表缓存在查询数据&#xff0c;更新数据时的工作情况以及对应概念。 SAP表缓存的工作 查询数据 更新数据 删除数据 表缓存的概念 表缓存技术设置属性 不允许缓冲&#xff1a; 允许缓冲&#xff0c;但已关闭&#xff1a; 缓冲已激活&#xff1a; 已…...

Mybatis插件入门

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…...

DOA估计算法——迭代自适应算法(IAA)

1 简介 迭代自适应法 (Iterative Adaptive Approach&#xff0c;IAA)估计算法最早由美国的电气工程师和数学家Robert Schmidt和Roy A. Kuc在1986年的一篇论文"Multiple Emitter Location and Signal Parameter Estimation"中首次提出了这一算法&#xff0c; IAA DOA …...

Python If语句以及代码块的基本介绍

if语句 在编程中if语句是一种根据条件执行不同代码块的控制结构,他根据条件的真假来分支程序的执行路径,所以我们可以通过if语句根据不同情况而执行不同的程序 格式 if [条件(bool值或者计算结果为bool类型的算式)] : a11if a>10:print("a大于10") # --> a大…...

[嵌入式专栏](FOC - SVPWM扇区计算Part1)

文章目录 1 . 概要2 . 扇区计算2.1 扇区Ⅰ计算2.2 扇区Ⅱ计算2.3 扇区Ⅲ计算 3 . 小结 【极客技术传送门】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 概要 经过扇区判断后&#xff0c;就知道在哪个扇区进行输出了 【Q】但是每个扇区分别输出怎样的结…...

亚马逊美国站ASTM F2613儿童折叠椅和凳子强制性安全标准

ASTM F2613折叠椅和凳子安全标准 美国消费品安全委员会&#xff08;CPSC&#xff09;发布的ASTM F2613儿童折叠椅和凳子的强制性安全标准&#xff0c;已于2020年7月6日生效&#xff0c;并被纳入联邦法规《16 CFR 1232儿童折叠椅和凳子安全标准》。 亚马逊要求在美国站上架的儿…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...