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',}})},

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

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

相关文章

2023“楚怡杯”湖南省赛“信息安全管理与评估“--应急响应(高职组)

2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书 2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书第一阶段竞赛项目试题第二阶段竞赛项目试题网络安全事件响应:需要环境私聊博主:2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书 第一…

顶配版SAM:由分割一切迈向感知一切

文章目录 0. 前言1. 论文地址1.1 项目&代码1.2 模型地址1.3 Demo 2. 模型介绍2.1 亮点2.2 方法 3. 量化结果、可视化展示Reference 0. 前言 现有的视觉分割基础模型&#xff0c;如 SAM 及其变体&#xff0c;集中优势在形状、边缘等初级定位感知&#xff0c;或依赖外部模型…

uniapp中uview组件库丰富的Calendar 日历用法

目录 基本使用 #日历模式 #单个日期模式 #多个日期模式 #日期范围模式 #自定义主题颜色 #自定义文案 #日期最大范围 #是否显示农历 #默认日期 基本使用 通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式&#xff0c;包含单选/多选/范围…

elasticsearch安装教程(超详细)

1.1 创建网络&#xff08;单点部署&#xff09; 因为我们还需要部署 kibana 容器&#xff0c;因此需要让 es 和 kibana 容器互联&#xff0c;所有先创建一个网络&#xff1a; docker network create es-net 1.2.加载镜像 采用的版本为 7.12.1 的 elasticsearch&#xff1b;…

python渗透工具编写学习笔记:8、无线网络渗透

目录 前言 8.1 概念 8.2 无线网络发现 8.3 无线网络弱点分析 8.3.1 使用Scapy来探测无线网络 8.3.2 使用Aircrack-ng工具 8.4 无线网络密码破解 8.5无线网络漏洞利用&#xff1a; 8.6 无线网络流量分析&#xff1a; 前言 因为一些原因&#xff0c;下一篇我们再来学习p…

Java线上问题排查思路

1、Java 服务常见问题 Java 服务的线上问题从系统表象来看大致可分成两大类: 系统环境异常、业务服务异常。 系统环境异常&#xff1a;主要从CPU、内存、磁盘、网络四个方面考虑。比如&#xff1a;CPU 占用率过高、CPU 上下文切换频率次数较高、系统可用内存长期处于较低值、…

Transformer模型中的Attention算法

参考【经典精读】万字长文解读Transformer模型和Attention机制 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/104393915图解Transformer_transformer模型训练准确率曲线图-CSDN博客https://blog.csdn.net/qq_41664845/article/details/84969266?appinstall0#commentBoxThe…

命令行终端查看当前目录下子文件和子文件夹数量

文章目录 查看当前目录下有多少子文件&#xff1a;查看当前目录下有多少子文件夹&#xff1a; 查看当前目录下有多少子文件&#xff1a; ls -lA ./ | grep "^-" | wc -l查看当前目录下有多少子文件夹&#xff1a; find ./ -mindepth 1 -type d | wc -l

【人工智能Ⅰ】实验9:BP神经网络

实验9 BP神经网络 一、实验目的 1&#xff1a;掌握BP神经网络的原理。 2&#xff1a;了解BP神经网络的结构&#xff0c;以及前向传播和反向传播的过程。 3&#xff1a;学会利用BP神经网络建立训练模型&#xff0c;并对模型进行评估。即学习如何调用Sklearn中的BP神经网络。…

IIS主机头名的用法--一个IP建多个Web站点

主机头名 我们有时候需要在一个IP地址上建立多个web站点&#xff0c;在IIS中&#xff0c;我们可通过简单的设置达到这个目标。 在IIS中&#xff0c;每个 Web 站点都具有唯一的、由三个部分组成的标识&#xff0c;用来接收和响应请求: (1) IP地址 (2)端口号 (3)主机头名。 …

CGAL的加热法

1、介绍 热方法是一种算法&#xff0c;通过返回三角形网格中所有顶点到给定源顶点集合中最近顶点的测地距离近似值&#xff0c;解决单源或多源最短路径问题。网格中两个顶点的测地距离是指从网格表面&#xff08;可能经过面的内部&#xff09;行进的距离。例如&#xff0c;在章…

CodeWhisperer:编码世界中的声音启迪者

人烟 导语&#xff1a; 在数字化时代&#xff0c;编码已经成为了一种不可或缺的技能。而 CodeWhisperer&#xff08;编码世界中的声音启迪者&#xff09;则以其卓越的技术和深厚的知识为人们带来了独特的启发和指导。本文将介绍 CodeWhisperer 的背景和成就&#xff0c;探讨他是…

Centos7:Jenkins+gitlab+node项目启动(3)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案 当我们使用sudo su切换权限时提示错误&#xff1a; sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set该错误出现原因&#xff1a;是因为/usr/bin/sudo的权限被…

GrayLog日志平台的基本使用-ssh之Email报警

1、首先编辑并添加邮件配置到server.conf&#xff08;注意&#xff1a;是添加&#xff09; vim /etc/graylog/server/server.conf # Email transport transport_email_enabled true transport_email_hostname smtp.qq.com transport_email_port 465 transport_email_use_a…

2023启示录丨自动驾驶这一年

图片&#xff5c;《老人与海》插图 过去的20年&#xff0c;都没有2023年如此动荡。 大模型犹如一颗原子弹投入科技圈&#xff0c;卷起万里尘沙&#xff0c;传统模式瞬间被夷为平地&#xff0c;在耀眼的白光和巨大的轰鸣声之下&#xff0c;大公司、创业者、投资人甚至是每一位观…

修改文件和目录的拥有者

chown 修改文件的用户组固然重要&#xff0c;但是修改文件的拥有者可能会更常用。修改用户组使用的是chgrp命令&#xff0c;而要修改拥有者则应该使用chown命令。 $ ls -l -rw-r--r-- 1 scott scott ... libby_arrowrock.jpg -rw-r--r-- 1 scott family ... libby.jpg -rw-r--…

手把手带你死磕ORBSLAM3源代码(十七)System.cc void System::SaveDebugData类代码分析

目录 一.前言 二.代码 2.1完整代码注释分析 一.前言 这段代码是一个C++函数,其主要功能是将一些与初始化相关的数据保存为文本文件。 二.代码 2.1完整代码注释分析 // 定义一个名为SaveDebugData的函数,它接受一个整型引用参数initIdx。 void System::SaveDebugData…

C语言字符串知识点和算法总结

目录 一、字符串遍历 1、字符串和字符数组 2、获取字符串长度 3、字符串遍历 4、大小写转换 5、字符串数组 二、字符串拷贝 三、字符串比较 四、字符串分割 五、字符串翻转 1、题目详解 2、算法详解 3、源码剖析 六、回文串 1、定义 2、例题讲解 3、算法详解 …

SSM实验室设备管理----计算机毕业设计

项目介绍 本项目为后台管理系统&#xff0c;分为管理员、老师、学生三种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 信息管理&#xff1a;用户管理&#xff1b; 基础管理&#xff1a;实验室管理,实验室申请记录,设备管理,设备记录管理,耗材管理,耗材记录管理等功能…