jje_uniapp/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue

<template name="cropper">
	<view>
		<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill"  :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: '',
			noTop: '',
			quality: '',
			index: ''
		},
		created() {
			this.ctxCanvas = uni.createCanvasContext('avatar-canvas', this);
			this.ctxCanvasOper = uni.createCanvasContext('oper-canvas', this);

			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.noTop ? false : true;
			if (!!this.noBar) {
				this.moreHeight = 0;
				this.fWindowResize();
			} else {
				uni.showTabBar({
					complete: (res) => {
						this.moreHeight = (res.errMsg === 'showTabBar:ok') ? 50 : 0;
						this.fWindowResize();
					}
				});
			}
		},
		methods: {
			fWindowResize() {
				let sysInfo = uni.getSystemInfoSync();
				this.platform = sysInfo.platform;
				this.pixelRatio = sysInfo.pixelRatio;
				this.windowWidth = sysInfo.windowWidth;
				// #ifdef H5
				this.drawTop = sysInfo.windowTop;
				this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom;
				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
				// #endif
				// #ifdef MP-WEIXIN
				this.windowHeight = sysInfo.windowHeight;
				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px'
				// #endif
				this.pxRatio = this.windowWidth / 750;

				let style = this.avatarStyle;
				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() {
        let self=this;
				if (this.fSelecting) return;
				this.fSelecting = true;
				setTimeout(() => {
					this.fSelecting = false;
				}, 500);

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: (r) => {
						uni.showLoading({
							mask: true
						});
						let path = this.imgPath = r.tempFilePaths[0];
						uni.getImageInfo({
							src: path,
							success: r => {
								this.imgWidth = r.width;
								this.imgHeight = r.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 {
										uni.showModal({
											title: '裁剪框的宽或高没有设置',
											showCancel: false
										})
										return;
									}
									this.selStyle = style;

								}

								if (!!self.noBar) {
									self.fDrawInit(true);
								} else {
									uni.hideTabBar({
										complete: () => {
											self.fDrawInit(true);
										}
									});
								}
							},
							fail: () => {
								uni.showToast({
									title: "error3",
									duration: 2000,
								})
							},
							complete() {
								uni.hideLoading();
							}
						});
					}
				})
			},
			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;

				this.styleDisplay = 'none';
				this.styleTop = '-10000px';
				this.hasSel = false;
				this.fHideImg();
				uni.canvasToTempFilePath({
					x: x,
					y: y,
					width: width,
					height: height,
					destWidth: expWidth,
					destHeight: expHeight,
					canvasId: 'avatar-canvas',
					fileType: 'png',
					quality: this.qlty,
					success: (r) => {
            console.log(r,'裁剪后的图片')
            this.$emit("uploadImg", r.tempFilePath);
					},
					fail: (res) => {
						uni.showToast({
							title: "error1",
							duration: 2000,
						})
					},
					complete: () => {
						this.noBar || uni.showTabBar();
					}
				}, this);
			},
			fDrawInit(ini = false) {
				let allWidth = this.windowWidth,
					allHeight = this.windowHeight,
					imgWidth = this.imgWidth,
					imgHeight = this.imgHeight,
					imgRadio = imgWidth / imgHeight,
					useWidth = allWidth,
					useHeight = allHeight - tabHeight,
					pixelRatio = this.pixelRatio,
					selWidth = parseInt(this.selStyle.width),
					selHeight = parseInt(this.selStyle.height);

				this.fixWidth = 0;
				this.fixHeight = 0;

				if (this.fixWidth) {
					useWidth = selWidth;
					useHeight = useWidth / imgRadio;
				} else if (this.fixHeight) {
					useHeight = selHeight;
					useWidth = useHeight * imgRadio;
				} else if (imgRadio < 1) {
					useWidth = selWidth;
					useHeight = parseInt(useWidth / imgRadio);
				} else {
					useHeight = selHeight;
					useWidth = parseInt(useHeight * imgRadio);
				}

				this.scaleSize = 1;
				this.rotateDeg = 0;
				this.posWidth = parseInt((allWidth - useWidth) / 2);
				this.posHeight = parseInt((allHeight - useHeight - tabHeight) / 2);
				this.useWidth = useWidth;
				this.useHeight = useHeight;
				let style = this.selStyle,
					left = parseInt(style.left),
					top = parseInt(style.top),
					width = parseInt(style.width),
					height = parseInt(style.height),
					canvas = this.canvas,
					canvasOper = this.canvasOper,
					ctxCanvas = this.ctxCanvas,
					ctxCanvasOper = this.ctxCanvasOper;
				ctxCanvasOper.setFillStyle('rgba(0,0,0, 0.5)');
				ctxCanvasOper.fillRect(0, 0, this.windowWidth, top);
				ctxCanvasOper.fillRect(0, top, left, height);
				ctxCanvasOper.fillRect(0, top + height, this.windowWidth, this.windowHeight - height - tabHeight - top);
				ctxCanvasOper.fillRect(left + width, top, this.windowWidth - width - left, height);
				ctxCanvasOper.setLineWidth(1);
				ctxCanvasOper.setStrokeStyle('rgba(255, 255, 255,1)'); //细线的颜色
				ctxCanvasOper.strokeRect(left, top, width, height);
       	// #ifdef H5
        ctxCanvasOper.draw();
        // #endif
				ctxCanvasOper.setLineWidth(3);
				ctxCanvasOper.setStrokeStyle('rgba(255, 255, 255, 1)'); //粗线的颜色
				ctxCanvasOper.moveTo(left + 20, top);
				ctxCanvasOper.lineTo(left, top);
				ctxCanvasOper.lineTo(left, top + 20);
				ctxCanvasOper.moveTo(left + width - 20, top);
				ctxCanvasOper.lineTo(left + width, top);
				ctxCanvasOper.lineTo(left + width, top + 20);
				ctxCanvasOper.moveTo(left + 20, top + height);
				ctxCanvasOper.lineTo(left, top + height);
				ctxCanvasOper.lineTo(left, top + height - 20);
				ctxCanvasOper.moveTo(left + width - 20, top + height);
				ctxCanvasOper.lineTo(left + width, top + height);
				ctxCanvasOper.lineTo(left + width, top + height - 20);
				ctxCanvasOper.stroke();
				this.postFirst = {
					left: left,
					top: top,
					width: width,
					height: selWidth,
					posWidth: this.posWidth,
					posHeight: this.posHeight
				};
          // #ifdef MP-WEIXIN
				ctxCanvasOper.draw(false, () => {
					if (ini) {
						this.styleDisplay = 'flex';
						this.styleTop = '0';
						ctxCanvas.setFillStyle('black');
						this.fDrawImage();
					}
				});
        // #endif
        // #ifdef H5
        ctxCanvasOper.draw(true, () => {
        	if (ini) {
        		this.styleDisplay = 'flex';
        		this.styleTop = this.drawTop + 'px';
        		ctxCanvas.setFillStyle('black');
        		this.fDrawImage();
        	}
        });

        	// #endif

				this.$emit("avtinit");
			},
			fDrawImage() {
				let tm_now = Date.now();
				if ((tm_now - this.drawTm )< 20) return;
				this.drawTm = tm_now;
				let ctxCanvas = this.ctxCanvas;
				ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight - tabHeight);
				//中心点坐标
				ctxCanvas.translate(this.posWidth + this.useWidth / 2, this.posHeight + this.useHeight / 2);
				//比例缩放
				ctxCanvas.scale(this.scaleSize, this.scaleSize);
				ctxCanvas.drawImage(this.imgPath, -this.useWidth / 2, -this.useHeight / 2, this.useWidth, this.useHeight);
				ctxCanvas.draw(false);
			},
			fHideImg() {
				this.prvImg = '';
				this.prvTop = '-10000px';
				this.showOper = true;
				this.prvImgData = null;
				this.target = null;
			},
			fClose() {
				this.styleDisplay = 'none';
				this.styleTop = '-10000px';
				this.hasSel = false;
				this.fHideImg();
				this.noBar || uni.showTabBar();
			},
      // #ifdef MP-WEIXIN
			fStart(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				this.touch0 = touch0;
				this.touch1 = touch1;

				if (touch1) {
         let x = touch1.x - touch0.x,
         	y = touch1.y - touch0.y;
         this.fgDistance = Math.sqrt(x * x + y * y);

				}
			},
      // #endif
      // #ifdef H5
      fStart(e) {
      	let touches = e.touches,
      		touch0 = touches[0],
      		touch1 = touches[1];

      	this.touch0 = touch0;
      	this.touch1 = touch1;

      	if (touch1) {
            let x = touch1.clientX - touch0.clientX,
            	y = touch1.clientY - touch0.clientY;
            this.fgDistance = Math.sqrt(x * x + y * y);
      	}
      },
      // #endif
      // #ifdef MP-WEIXIN
			fMove(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				if (touch1) {
					let x = touch1.x - touch0.x,
						y = touch1.y - touch0.y,
						fgDistance = Math.sqrt(x * x + y * y),
						scaleSize = 0.005 * (fgDistance - this.fgDistance),
						beScaleSize = this.scaleSize + scaleSize;

					do {
						if (!this.letScale) break;
						if (beScaleSize < this.mnScale) break;
						if (beScaleSize > this.mxScale) break;
						this.scaleSize = beScaleSize;
					} while (0);
					this.fgDistance = fgDistance;

					if (touch1.x !== touch0.x && this.letRotate) {
						x = (this.touch1.y - this.touch0.y) / (this.touch1.x - this.touch0.x);
						y = (touch1.y - touch0.y) / (touch1.x - touch0.x);
						this.rotateDeg += Math.atan((y - x) / (1 + x * y)) * 180 / Math.PI;
						this.touch0 = touch0;
						this.touch1 = touch1;
					}

					this.fDrawImage();
				} else if (this.touch0) {
					let x = touch0.x - this.touch0.x,
						y = touch0.y - this.touch0.y,
						beX = this.posWidth + x,
						beY = this.posHeight + y;
						if (Math.abs(x) < 100 && !this.lckWidth) this.posWidth = beX;
						if (Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
					this.touch0 = touch0;
					this.fDrawImage();
				}
			},
        // #endif
      	// #ifdef H5
        fMove(e) {
        	let touches = e.touches,
        		touch0 = touches[0],
        		touch1 = touches[1];

        	if (touch1) {
        		let x = touch1.clientX - touch0.clientX,
        			y = touch1.clientY - touch0.clientY,
        			fgDistance = Math.sqrt(x * x + y * y),
        			scaleSize = 0.005 * (fgDistance - this.fgDistance),
        			beScaleSize = this.scaleSize + scaleSize;

        		do {
        			if (!this.letScale) break;
        			if (beScaleSize < this.mnScale) break;
        			if (beScaleSize > this.mxScale) break;
        			this.scaleSize = beScaleSize;
        		} while (0);
        		this.fgDistance = fgDistance;

        		if (touch1.x !== touch0.x && this.letRotate) {
        			x = (this.touch1.clientY - this.touch0.clientY) / (this.touch1.clientX - this.touch0.clientX);
        			y = (touch1.clientY - touch0.clientY) / (touch1.clientX - touch0.clientX);
        			this.rotateDeg += Math.atan((y - x) / (1 + x * y)) * 180 / Math.PI;
        			this.touch0 = touch0;
        			this.touch1 = touch1;
        		}

        		this.fDrawImage();
        	} else if (this.touch0) {
            let x=touch0.clientX - this.touch0.clientX,
            y=touch0.clientY - this.touch0.clientY,
        		// let x = touch0.x - this.touch0.x,
        		// 	y = touch0.y - this.touch0.y,
        			beX = this.posWidth + x,
        			beY = this.posHeight + y;
        			if (Math.abs(x) < 100 && !this.lckWidth) this.posWidth = beX;
        			if (Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
        		this.touch0 = touch0;
        		this.fDrawImage();
        	}
        },
        	// #endif
			async fEnd(e) {
				let self = this;
				let touches = e.touches,
					touch0 = touches && touches[0],
					touch1 = touches && touches[1];
				if (self.scaleSize < 1) {
					let style = self.selStyle;
					let imgRadio = self.imgWidth / self.imgHeight;
					//高长宽短
					if (imgRadio < 1 && self.scaleSize * self.useWidth < style.width) {
						self.posWidth = style.left;
						self.scaleSize = 1
						setTimeout(function() {
							self.fDrawImage();
						}, 100)
					} else if (self.scaleSize * self.useHeight < style.width) {
						//高短宽长
						self.posHeight = style.top;
						self.scaleSize = 1
						setTimeout(function() {
							self.fDrawImage();
						}, 100)
					}
				} else if (this.scaleSize == 1) {
					let endWidth = this.posWidth - this.postFirst.posWidth,
						firstWidth = this.postFirst.left - this.postFirst.posWidth;
					let endHeight = this.posHeight - this.postFirst.posHeight,
						firstHigth = this.postFirst.top - this.postFirst.posHeight;
					if (endWidth > 0 && this.posWidth > this.postFirst.left) {
						//右滑动过长
						this.posWidth = this.postFirst.left;
					} else if (endWidth < 0 && endWidth < firstWidth) {
						//左滑动过长
						this.posWidth = -this.postFirst.left + this.postFirst.posWidth * 2;
					}

					if (endHeight < 0 && this.posHeight < this.postFirst.top) {
						//上滑动过长
						this.posHeight = -this.postFirst.top + this.postFirst.posHeight * 2 ;
					} else if (endHeight > 0 && endHeight > firstHigth) {
						//下滑动过长
						this.posHeight = this.postFirst.top;
					}
					setTimeout(function() {
						self.fDrawImage();
					}, 100);

				}
				if (touch0) {
					this.touch0 = touch0;
				} else {
					this.touch0 = null;
					this.touch1 = null;
				}
			},
			btop(base64) {
				return new Promise(function(resolve, reject) {
					var arr = base64.split(','),
						mime = arr[0].match(/:(.*?);/)[1],
						bstr = atob(arr[1]),
						n = bstr.length,
						u8arr = new Uint8Array(n);
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n);
					}
					return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([u8arr], {
						type: mime
					})));
				});
			},
		}
	}
</script>

<style>
	.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>