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.url
						this.$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.info
				if (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',
					}
				})
			},