QTApp_800/pages/mine/avatar/index.uvue

<template>
	<view class=" container">
		<view class=" page-body uni-content-info">
			<view class=' cropper-content'>
				<view v-if="isShowImg" class=" uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
					<view class=" uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
						<image :src="imageSrc" class="my-image" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
						<view class=" uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
						    :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
							<view class=" uni-cropper-view-box">
								<view class=" uni-cropper-dashed-h"></view>
								<view class=" uni-cropper-dashed-v"></view>
								<view class=" uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-point point-tr" data-drag="topTight"></view>
								<view class=" uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
								<view class=" uni-cropper-point point-bl" data-drag="bottomLeft"></view>
								<view class=" uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class=" uni-cropper-point point-lt" data-drag="leftTop"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class=' cropper-config'>
				<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
				<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
			</view>
			<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
		</view>
	</view>
</template>

<script lang="uts">
  import {globalConfig} from '@/config'
  import {state,SetAvatar} from "@/store"
  import { uploadAvatar } from "@/api/system/user"
  
  const baseUrl = globalConfig.baseUrl
	let sysInfo = uni.getSystemInfoSync()
	let SCREEN_WIDTH :number = sysInfo.screenWidth
	let PAGE_X:number, // 手按下的x位置
		PAGE_Y:number, // 手按下y的位置 
		PR:number = sysInfo.pixelRatio, // dpi
		T_PAGE_X:number, // 手移动的时候x的位置
		T_PAGE_Y:number, // 手移动的时候Y的位置
		CUT_L:number, // 初始化拖拽元素的left值
		CUT_T:number, // 初始化拖拽元素的top值
		CUT_R:number, // 初始化拖拽元素的
		CUT_B:number, // 初始化拖拽元素的
		CUT_W:number, // 初始化拖拽元素的宽度
		CUT_H:number, //  初始化拖拽元素的高度
		IMG_RATIO:number, // 图片比例
		IMG_REAL_W:number, // 图片实际的宽度
		IMG_REAL_H:number, // 图片实际的高度
		DRAFG_MOVE_RATIO:number = 1, //移动时候的比例,
		INIT_DRAG_POSITION:number = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
		DRAW_IMAGE_W:number = sysInfo.screenWidth // 设置生成的图片宽度

	export default {
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				imageSrc: state.avatar as string,
				isShowImg: false as boolean,
				// 初始化的宽高
				cropperInitW: SCREEN_WIDTH as number,
				cropperInitH: SCREEN_WIDTH as number,
				// 动态的宽高
				cropperW: SCREEN_WIDTH as number,
				cropperH: SCREEN_WIDTH as number,
				// 动态的left top值
				cropperL: 0 as number,
				cropperT: 0 as number,

				transL: 0 as number,
				transT: 0 as number,

				// 图片缩放值
				scaleP: 0 as number,
				imageW: 0 as number,
				imageH: 0 as number,

				// 裁剪框 宽高
				cutL: 0 as number,
				cutT: 0 as number,
				cutB: SCREEN_WIDTH as number,
				cutR: 1 as number,
				qualityWidth: DRAW_IMAGE_W as number,
				innerAspectRadio: DRAFG_MOVE_RATIO as number
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {
			this.loadImage()
		},
		methods: {
			// setData: function (obj) {
			// 	debugger
			// 	let that = this
			// 	Object.keys(obj).forEach(function (key) {
			// 		// that.$set(that.$data, key, obj[key])
			// 		that.$data[key] = obj[key];
			// 	})
			// },
			getImage: function () {
				var _this = this
				uni.chooseImage({
					success: function (res) {
						// _this.setData({
						// 	imageSrc: res.tempFilePaths[0],
						// })
						_this.imageSrc=res.tempFilePaths[0]
						_this.loadImage()
					},
				})
			},
			loadImage: function () {
				var _this = this
				uni.getImageInfo({
					src: _this.imageSrc,
					success: function success(res:GetImageInfoSuccess) {
						
						IMG_RATIO = 1 / 1
						if (IMG_RATIO >= 1) {
							IMG_REAL_W = SCREEN_WIDTH
							IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
						} else {
							IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
							IMG_REAL_H = SCREEN_WIDTH
						}
						let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
						INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
						// 根据图片的宽高显示不同的效果   保证图片可以正常显示
						if (IMG_RATIO >= 1) {
							let cutT:number = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2)
							let cutB:number = cutT
							let cutL:number = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2)
							let cutR:number = cutL
							_this.cropperW=SCREEN_WIDTH
							_this.cropperH=SCREEN_WIDTH / IMG_RATIO
							// 初始化left right
							_this.cropperL=Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2)
							_this.cropperT=Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2)
							_this.cutL=cutL
							_this.cutT=cutT
							_this.cutR=cutR
							_this.cutB=cutB
							// 图片缩放值
							_this.imageW=IMG_REAL_W
							_this.imageH=IMG_REAL_H
							_this.scaleP=IMG_REAL_W / SCREEN_WIDTH
							_this.qualityWidth=DRAW_IMAGE_W
							_this.innerAspectRadio=IMG_RATIO
						} else {
							let cutL:number = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2)
							let cutR:number = cutL
							let cutT:number= Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2)
							let cutB:number = cutT
							_this.cropperW=SCREEN_WIDTH * IMG_RATIO
							_this.cropperH=SCREEN_WIDTH
							// 初始化left right
							_this.cropperL=Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2)
							_this.cropperT=Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2)
							_this.cutL=cutL
							_this.cutT=cutT
							_this.cutR=cutR
							_this.cutB=cutB
							// 图片缩放值
							_this.imageW=IMG_REAL_W
							_this.imageH=IMG_REAL_H
							_this.scaleP=IMG_REAL_W / SCREEN_WIDTH
							_this.qualityWidth=DRAW_IMAGE_W
							_this.innerAspectRadio=IMG_RATIO
						}
						// _this.setData({
						// 	isShowImg: true
						// })
						_this.isShowImg=true
						uni.hideLoading()
					}
				})
			},
			// 拖动时候触发的touchStart事件
			contentStartMove(e) {
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},

			// 拖动时候触发的touchMove事件
			contentMoveing(e) {
				var _this = this
				var dragLengthX:number = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
				var dragLengthY:number = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
				// 左移
				if (dragLengthX > 0) {
					if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
				} else {
					if ((this.cutR + dragLengthX) < 0) dragLengthX = -this.cutR
				}

				if (dragLengthY > 0) {
					if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
				} else {
					if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
				}
				// this.setData({
				// 	cutL: this.cutL - dragLengthX,
				// 	cutT: this.cutT - dragLengthY,
				// 	cutR: this.cutR + dragLengthX,
				// 	cutB: this.cutB + dragLengthY
				// })
				this.cutL=this.cutL - dragLengthX
				this.cutT=this.cutT - dragLengthY
				this.cutR=this.cutR - dragLengthX
				this.cutB=this.cutB - dragLengthY
				
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},

			contentTouchEnd() {

			},

			// 获取图片
			getImageInfo() {
				var _this = this
				uni.showLoading({
					title: '图片生成中...',
				})
				
				// 将图片写入画布
				// 这种方式跨平台，一般推荐这种写法。需HBuilderX 4.25+支持。
				uni.createCanvasContextAsync({
				  id: 'myCanvas',
				  component: this,
				  success: (context : CanvasContext) => {
				    const ctx = context.getContext('2d')!;
					ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H)
					ctx.draw(true, () => {
						// 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
						var canvasW:number = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W
						var canvasH:number = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H
						var canvasL:number = (_this.cutL / _this.cropperW) * IMG_REAL_W
						var canvasT:number = (_this.cutT / _this.cropperH) * IMG_REAL_H
						uni.canvasToTempFilePath({
							x: canvasL,
							y: canvasT,
							width: canvasW,
							height: canvasH,
							destWidth: canvasW,
							destHeight: canvasH,
							quality: 0.5,
							canvasId: 'myCanvas',
							success: function (res) {
								debugger
								uni.hideLoading()
								let data:UTSJSONObject = {name: 'avatarfile', filePath: res.tempFilePath}
								uploadAvatar(data).then((response:any) => {
									SetAvatar(baseUrl + response.imgUrl)
									uni.showToast({ title: "修改成功", icon: 'success' })
									uni.navigateBack()
								})
							}
						},this)
					})
				  }
				})
				
			},
			// 设置大小的时候触发的touchStart事件
			dragStart(e) {
				T_PAGE_X = e.touches[0].pageX
				T_PAGE_Y = e.touches[0].pageY
				CUT_L = this.cutL
				CUT_R = this.cutR
				CUT_B = this.cutB
				CUT_T = this.cutT
			},

			// 设置大小的时候触发的touchMove事件
			dragMove(e) {
				var _this = this
				var dragType:string = e.target.dataset.drag
				switch (dragType) {
					case 'right':
						var dragLength:number = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_R + dragLength < 0) dragLength = -CUT_R
						// this.setData({
						// 	cutR: CUT_R + dragLength
						// })
						this.cutR=CUT_R+dragLength
						break
					case 'left':
						var dragLength:number = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_L - dragLength < 0) dragLength = CUT_L
						if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
						// this.setData({
						// 	cutL: CUT_L - dragLength
						// })
						this.cutL=CUT_L - dragLength
						break
					case 'top':
						var dragLength:number = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_T - dragLength < 0) dragLength = CUT_T
						if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
						// this.setData({
						// 	cutT: CUT_T - dragLength,
						// })
						this.cutT=CUT_T - dragLength
						break
					case 'bottom':
						var dragLength:number = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_B + dragLength < 0) dragLength = -CUT_B
						// this.setData({
						// 	cutB: CUT_B + dragLength
						// })
						this.cutB=CUT_B - dragLength
						break
					case 'rightBottom':
						var dragLengthX:number = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						var dragLengthY:number = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO

						if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
						if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
						let cutB:number = CUT_B + dragLengthY
						let cutR:number = CUT_R + dragLengthX

						// this.setData({
						// 	cutB: cutB,
						// 	cutR: cutR
						// })
						this.cutR=cutR
						this.cutB=cutB
						break
					default:
						break
				}
			}
		}
	}
</script>

<style>
	/* pages/uni-cropper/index.wxss */

	.uni-content-info {
		/* position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		align-items: center;
		flex-direction: column; */
	}

	.cropper-config {
		padding: 20rpx 40rpx;
	}

	.cropper-content {
		min-height: 750rpx;
		width: 100%;
	}

	.uni-corpper {
		position: relative;
		overflow: hidden;
		/* #ifdef WEB */
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		 user-select: none;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		/* #endif */
		box-sizing: border-box;
	}

	.uni-corpper-content {
		position: relative;
	}
	/* #ifdef APP-ANDROID */
	.uni-corpper-content .my-image {
		width: 100%;
		min-width: 0 !important;
		height: 100%;
		min-height: 0 !important;
		image-orientation: 0deg !important;
		margin: 0 auto;
	}
	/* #endif */
	/* #ifndef APP-ANDROID */
	.uni-corpper-content image {
		display: block; 
		width: 100%;
		min-width: 0 !important;
		max-width: none !important;
		height: 100%;
		min-height: 0 !important;
		max-height: none !important;
		image-orientation: 0deg !important;
		margin: 0 auto;
	}
	/* #endif */
	
	/* 移动图片效果 */

	.uni-cropper-drag-box {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		cursor: move;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}
	/* 内部的信息 */

	.uni-corpper-crop-box {
		position: absolute;
		background: rgba(255, 255, 255, 0.3);
		z-index: 2;
	}

	.uni-corpper-crop-box .uni-cropper-view-box {
		position: relative;
		/* #ifndef APP-ANDROID */
		display: block;
		/* #endif */
		width: 100%;
		height: 100%;
		overflow: visible;
		outline: 1rpx solid #69f;
		outline-color: rgba(102, 153, 255, .75)
	}
	/* 横向虚线 */

	.uni-cropper-dashed-h {
		position: absolute;
		top: 33.33333333%;
		left: 0;
		width: 100%;
		height: 33.33333333%;
		border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
		border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
	}
	/* 纵向虚线 */

	.uni-cropper-dashed-v {
		position: absolute;
		left: 33.33333333%;
		top: 0;
		width: 33.33333333%;
		height: 100%;
		border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
		border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
	}
	/* 四个方向的线  为了之后的拖动事件*/

	.uni-cropper-line-t {
		position: absolute;
		/* #ifndef APP-ANDROID */
		display: block;
		/* #endif */
		width: 100%;
		background-color: #69f;
		top: 0;
		left: 0;
		height: 1rpx;
		opacity: 0.1;
		cursor: n-resize;
	}

	.uni-cropper-line-t::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0rpx;
		width: 100%;
		/* #ifdef WEB */
		-webkit-transform: translate3d(0, -50%, 0);
		/* #endif */
		transform: translate3d(0, -50%, 0);
		bottom: 0;
		height: 41rpx;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-r {
		position: absolute;
		/* #ifndef APP-ANDROID */
		display: block;
		/* #endif */
		background-color: #69f;
		top: 0;
		right: 0rpx;
		width: 1rpx;
		opacity: 0.1;
		height: 100%;
		cursor: e-resize;
	}

	.uni-cropper-line-r::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 41rpx;
		/* #ifdef WEB */
		-webkit-transform: translate3d(-50%, 0, 0);
		/* #endif */
		
		transform: translate3d(-50%, 0, 0);
		bottom: 0;
		height: 100%;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-b {
		position: absolute;
		/* #ifndef APP-ANDROID */
		display: block;
		/* #endif */
		width: 100%;
		background-color: #69f;
		bottom: 0;
		left: 0;
		height: 1rpx;
		opacity: 0.1;
		cursor: s-resize;
	}

	.uni-cropper-line-b::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0rpx;
		width: 100%;
		/* #ifdef WEB */
		-webkit-transform: translate3d(0, -50%, 0);
		/* #endif */
		
		transform: translate3d(0, -50%, 0);
		bottom: 0;
		height: 41rpx;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-l {
		position: absolute;
		/* #ifndef APP-ANDROID */
		display: block;
		/* #endif */
		background-color: #69f;
		top: 0;
		left: 0;
		width: 1rpx;
		opacity: 0.1;
		height: 100%;
		cursor: w-resize;
	}

	.uni-cropper-line-l::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 41rpx;
		/* #ifdef WEB */
		-webkit-transform: translate3d(-50%, 0, 0);
		/* #endif */
		
		transform: translate3d(-50%, 0, 0);
		bottom: 0;
		height: 100%;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-point {
		width: 5rpx;
		height: 5rpx;
		background-color: #69f;
		opacity: .75;
		position: absolute;
		z-index: 3;
	}

	.point-t {
		top: -3rpx;
		left: 50%;
		margin-left: -3rpx;
		cursor: n-resize;
	}

	.point-tr {
		top: -3rpx;
		left: 100%;
		margin-left: -3rpx;
		cursor: n-resize;
	}

	.point-r {
		top: 50%;
		left: 100%;
		margin-left: -3rpx;
		margin-top: -3rpx;
		cursor: n-resize;
	}

	.point-rb {
		left: 100%;
		top: 100%;
		/* #ifdef WEB */
		-webkit-transform: translate3d(-50%, -50%, 0);
		/* #endif */
		
		transform: translate3d(-50%, -50%, 0);
		cursor: n-resize;
		width: 36rpx;
		height: 36rpx;
		background-color: #69f;
		position: absolute;
		z-index: 1112;
		opacity: 1;
	}

	.point-b {
		left: 50%;
		top: 100%;
		margin-left: -3rpx;
		margin-top: -3rpx;
		cursor: n-resize;
	}

	.point-bl {
		left: 0%;
		top: 100%;
		margin-left: -3rpx;
		margin-top: -3rpx;
		cursor: n-resize;
	}

	.point-l {
		left: 0%;
		top: 50%;
		margin-left: -3rpx;
		margin-top: -3rpx;
		cursor: n-resize;
	}

	.point-lt {
		left: 0%;
		top: 0%;
		margin-left: -3rpx;
		margin-top: -3rpx;
		cursor: n-resize;
	}
	/* 裁剪框预览内容 */

	.uni-cropper-viewer {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

/* 	.uni-cropper-viewer image {
		position: absolute;
		z-index: 2;
	} */
</style>