ece.suwa3d.com/src/views/badge/cropper.vue

<template name="cropper">
	<view>
		<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" @click="fSelect" :style="imgStyle"></image>
		<!-- 上传图片 -->
		<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
		 disable-scroll="false"></canvas>
		<!-- 截取边框 -->
		<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
		 disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"></canvas>
		<view class="oper-wrapper" :style="{display: styleDisplay}">
			<view class="btn-wrapper" v-if="showOper">
				<view @click="fClose" hover-class="hover">取消</view>
				<view @click="fUpload" hover-class="hover">选取</view>
			</view>
		</view>
	</view>
</template>

<script>
	const tabHeight = 70;
	export default {
		name: "cropper",
		data() {
			return {
				cvsStyleHeight: '0px',
				styleDisplay: 'none',
				styleTop: '-10000px',
				prvTop: '-10000px',
				imgStyle: {},
				selStyle: {},
				showOper: true,
				imgSrc: {
					imgSrc: ''
				},
				qlty: 0.9,
				postWidthFirst: {},
			};
		},
		watch: {
			avatarSrc() {
				this.imgSrc.imgSrc = this.avatarSrc;
			}
		},
		props: {
			avatarSrc: '',
			avatarStyle: '',
			selWidth: '',
			selHeight: '',
			expWidth: '',
			expHeight: '',
			minScale: '',
			maxScale: '',
			canScale: '',
			noTab: '',
			quality: '',
			index: ''
		},
		created() {
			const canvas = document.getElementById('avatar-canvas');
			const operCanvas = document.getElementById('oper-canvas');
			this.ctxCanvas = canvas.getContext('2d');
			this.ctxCanvasOper = operCanvas.getContext('2d');

			this.qlty = parseInt(this.quality) || 0.9;
			this.imgSrc.imgSrc = this.avatarSrc;
			this.letScale = this.canScale === 'false' ? 0 : 1;
			this.indx = this.index || undefined;
			this.mnScale = this.minScale || 0.3;
			this.mxScale = this.maxScale || 4;
			this.noBar = this.noTab === 'true' ? 1 : 0;
			if (this.noBar) {
				this.moreHeight = 0;
				this.fWindowResize();
			} else {
				this.moreHeight = 50;
				this.fWindowResize();
			}
		},
		methods: {
			fWindowResize() {
				const sysInfo = {
					platform: navigator.platform,
					pixelRatio: window.devicePixelRatio,
					windowWidth: window.innerWidth,
					windowHeight: window.innerHeight,
					windowTop: window.scrollY,
					windowBottom: 0,
					statusBarHeight: 0,
					screenHeight: screen.height
				};

				this.platform = sysInfo.platform;
				this.pixelRatio = sysInfo.pixelRatio;
				this.windowWidth = sysInfo.windowWidth;
				this.drawTop = sysInfo.windowTop;
				this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom;
				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';

				this.pxRatio = this.windowWidth / 750;

				let style = this.avatarStyle;
				console.log(style)
				this.imgStyle = style;
				this.expWidth && (this.exportWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth) * this.pxRatio :
					parseInt(this.expWidth));
				this.expHeight && (this.exportHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight) * this.pxRatio :
					parseInt(this.expHeight));

				if (this.styleDisplay === 'flex') {
					this.fDrawInit(true);
				}
				this.fHideImg();
			},
			fSelect() {
				if (this.fSelecting) return;
				this.fSelecting = true;
				setTimeout(() => {
					this.fSelecting = false;
				}, 500);

				const input = document.createElement('input');
				input.type = 'file';
				input.accept = 'image/*';
				input.onchange = (e) => {
					const file = e.target.files[0];
					if(!file) return;

					const reader = new FileReader();
					reader.onload = (e) => {
						const path = e.target.result;
						this.imgPath = path;

						const img = new Image();
						img.onload = () => {
							this.imgWidth = img.width;
							this.imgHeight = img.height;
							this.path = path;

							if (!this.hasSel) {
								let style = this.selStyle || {};
								if (this.selWidth && this.selHeight) {
									let selWidth = this.selWidth.indexOf('rpx') >= 0 ? parseInt(this.selWidth) * this.pxRatio :
										parseInt(this.selWidth),
										selHeight = this.selHeight.indexOf('rpx') >= 0 ? parseInt(this.selHeight) * this.pxRatio :
										parseInt(this.selHeight);
									style.width = parseInt(selWidth);
									style.height = parseInt(selHeight);
									style.top = parseInt((this.windowHeight - style.height - tabHeight) / 2);
									style.left = parseInt((this.windowWidth - style.width) / 2);
								} else {
									alert('裁剪框的宽或高没有设置');
									return;
								}
								this.selStyle = style;
							}

							this.fDrawInit(true);
						};
						img.src = path;
					};
					reader.readAsDataURL(file);
				};
				input.click();
			},
			fUpload() {
				if (this.fUploading) return;
				this.fUploading = true;
				setTimeout(() => {
					this.fUploading = false;
				}, 1000);

				let style = this.selStyle,
					x = parseInt(style.left),
					y = parseInt(style.top),
					width = parseInt(style.width),
					height = parseInt(style.height),
					expWidth = this.exportWidth || width,
					expHeight = this.exportHeight || height;

				x *= this.pixelRatio;
				y *= this.pixelRatio;
				expWidth = width;
				expHeight = height;

				this.styleDisplay = 'none';
				this.styleTop = '-10000px';
				this.hasSel = false;
				this.fHideImg();

				const canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				const ctx = canvas.getContext('2d');
				ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight);

				canvas.toBlob((blob) => {
					const url = URL.createObjectURL(blob);
					this.$emit("upload", {
						avatar: this.imgSrc,
						path: url,
						index: this.indx
					});
				}, 'image/png', this.qlty);
			},
			// ... 其他方法保持不变
		}
	}
</script>

<style lang="less">
	.my-canvas {
		display: flex;
		position: fixed !important;
		background: #000000;
		left: 0;
		z-index: 100;
		width: 100%;
	}

	.my-avatar {
		width: 100vw;
		height: 100vw;
	}

	.oper-canvas {
		display: flex;
		position: fixed !important;
		left: 0;
		z-index: 101;
		width: 100%;
	}

	.oper-wrapper {
		height: 71px;
		position: fixed !important;
		box-sizing: border-box;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 200;
		flex-direction: row;
	}

	.btn-wrapper {
		background-color: #000000;
		color: #ffffff;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-around;
		align-items: center
	}

	.btn-wrapper view {
		width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 16px;
		color: #ffffff;
		z-index: 300;
	}

	.hover {
		color: #f1f1f1;
	}
</style>