本文主要是介绍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">姓 名：{{userinfo.name}}<br>班 级：{{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)，裁出可自定义固定大小图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
