修复微信小程序端裁剪图片问题

a8b1baa4 · DCloud_JSON · 827afca9 · a8b1baa4 · a8b1baa4 · a8b1baa4
3 changed file
--- a/pages/ucenter/userinfo/limeClipper/limeClipper.vue
+++ b/pages/ucenter/userinfo/limeClipper/limeClipper.vue
--- a/pages/ucenter/userinfo/limeClipper/utils.js
+++ b/pages/ucenter/userinfo/limeClipper/utils.js
+/**
-/**
+ * 判断手指触摸位置
- * h5网络地址转base64
+ */
- */
+export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
-export function pathToBase64(path) {
+	/*
-	// #ifdef H5
+	 * (右下>>1 右上>>2 左上>>3 左下>>4)
-	return new Promise((resolve, reject) => {
+	 */
-		const _fileReader = (blob) => {
+	let corner;
-			const fileReader = new FileReader();
+	/**
-			fileReader.onload = (e) => {
+	 * 思路：（利用直角坐标系）
-				resolve(e.target.result);
+	 *  1.找出裁剪框中心点
-			};
+	 *  2.如点击坐标在上方点与左方点区域内，则点击为左上角
-			fileReader.readAsDataURL(blob);
+	 *  3.如点击坐标在下方点与右方点区域内，则点击为右下角
-			fileReader.onerror = (error) => {
+	 *  4.其他角同理
-				console.error('blobToBase64 error:', JSON.stringify(error))
+	 */
-				reject(new Error('blobToBase64 error'));
+	const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
-			};
+	const currentPoint = [currentX, currentY]; // 触摸点
-		}
-		if (/^(http|\/\/)/.test(path) && typeof FileReader === 'function') {
+	if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
-			window.URL = window.URL || window.webkitURL;
+		corner = 3; // 左上
-			const xhr = new XMLHttpRequest();
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
-			xhr.open("get", path, true);
+		corner = 2; // 右上
-			xhr.timeout = 2000;
+	} else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
-			xhr.responseType = "blob";
+		corner = 4; // 左下
-			xhr.onload = function() {
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
-				if (this.status == 200) {
+		corner = 1; // 右下
-					_fileReader(this.response)
+	}
-				}
-			}
+	return corner;
-			xhr.send();
+}
-		}
-	})
+/**
-	// #endif
+ * 图片边缘检测检测时，计算图片偏移量
-}
+ */
+export function calcImageOffset(data, scale) {
-/**
+	let left = data.imageLeft;
- * 判断手指触摸位置
+	let top = data.imageTop;
- */
+	scale = scale || data.scale;
-export function determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY) {
-	const EXPAND_SIZE = 24;
+	let imageWidth = data.imageWidth;
+	  let imageHeight = data.imageHeight;
-	let leftx1 = cutX - EXPAND_SIZE;
+	  if ((data.angle / 90) % 2) {
-	let leftx2 = cutX + EXPAND_SIZE;
+	    imageWidth = data.imageHeight;
+	    imageHeight = data.imageWidth;
-	let topy1 = cutY - EXPAND_SIZE;
+	  }
-	let topy2 = cutY + EXPAND_SIZE;
+	  const {
+	      clipX,
-	let rightx1 = cutX + clipWidth - EXPAND_SIZE;
+	      clipWidth,
-	let rightx2 = cutX + clipWidth + EXPAND_SIZE;
+	      clipY,
+	      clipHeight
-	let bottomy1 = cutY + clipHeight - EXPAND_SIZE;
+	    } = data;
-	let bottomy2 = cutY + clipHeight + EXPAND_SIZE;
-	let corner;
+	// 当前图片宽度/高度
-	const isRight = currentX > rightx1 && currentX < rightx2;
+	const currentImageSize = (size) => (size * scale) / 2;
-	const isLeft = currentX > leftx1 && currentX < leftx2;
+	const currentImageWidth = currentImageSize(imageWidth);
-	const isBottom = currentY > bottomy1 && currentY < bottomy2;
+	const currentImageHeight = currentImageSize(imageHeight);
-	const isTop = currentY > topy1 && currentY < topy2;
-	if (isRight && isBottom) {
+	left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
-		corner = 1;
+	left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
-	} else if (isRight && isTop) {
+	top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
-		corner = 2;
+	top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
-	} else if (isLeft && isTop) {
+	return {
-		corner = 3;
+		left,
-	} else if (isLeft && isBottom) {
+		top,
-		corner = 4;
+		scale
-	}
+	};
-	return corner;
+}
-}
+/**
-/**
+ * 图片边缘检测时，计算图片缩放比例
- * 图片边缘检测检测时，计算图片偏移量
+ */
- */
+export function calcImageScale(data, scale) {
-export function calcImageOffset(data, scale) {
+	scale = scale || data.scale;
 	let {
-		imageLeft: left,
+		imageWidth,
-		imageTop: top,
+		imageHeight,
-		imageWidth,
+		clipWidth,
-		imageHeight,
+		clipHeight,
-		cutX,
+		angle
-		clipWidth,
+	} = data
-		cutY,
+	if ((angle / 90) % 2) {
-		clipHeight
+		imageWidth = imageHeight;
-	} = data
+		imageHeight = imageWidth;
-	scale = scale || data.scale;
+	}
-	if ((data.angle / 90) % 2) {
+	if (imageWidth * scale < clipWidth) {
-		imageWidth = mageHeight;
+		scale = clipWidth / imageWidth;
-		imageHeight = mageWidth;
+	}
-	}
+	if (imageHeight * scale < clipHeight) {
+		scale = Math.max(scale, clipHeight / imageHeight);
-	// 当前图片宽度/高度
+	}
-	const currentImageSize = (size) => (size * scale) / 2;
+	return scale;
-	const currentImageWidth = currentImageSize(imageWidth);
+}
-	const currentImageHeight = currentImageSize(imageHeight);
+/**
-	left = cutX + currentImageWidth >= left ? left : cutX + currentImageWidth;
+ * 计算图片尺寸
-	left = cutX + clipWidth - currentImageWidth <= left ? left : cutX + clipWidth - currentImageWidth;
+ */
-	top = cutY + currentImageHeight >= top ? top : cutY + currentImageHeight;
+export function calcImageSize(width, height, data) {
-	top = cutY + clipHeight - currentImageHeight <= top ? top : cutY + clipHeight - currentImageHeight;
+	let imageWidth = width,
-	return {
+		imageHeight = height;
-		left,
+	let {
-		top,
+		clipWidth,
-		scale
+		clipHeight,
-	};
+		sysinfo,
-}
+		width: originWidth,
+		height: originHeight
-/**
+	} = data
- * 图片边缘检测时，计算图片缩放比例
+	if (imageWidth && imageHeight) {
- */
+		if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
-export function calcImageScale(data, scale) {
+			imageHeight = clipHeight || originHeight;
-	scale = scale || data.scale;
+			imageWidth = (width / height) * imageHeight;
-	let {
+		} else {
-		imageWidth,
+			imageWidth = clipWidth || originWidth;
-		imageHeight,
+			imageHeight = (height / width) * imageWidth;
-		clipWidth,
+		}
-		clipHeight,
+	} else {
-		angle
+		let sys = sysinfo || uni.getSystemInfoSync();
-	} = data
+		imageWidth = sys.windowWidth;
-	if ((angle / 90) % 2) {
+		imageHeight = 0;
-		imageWidth = imageHeight;
+	}
-		imageHeight = imageWidth;
+	return {
-	}
+		imageWidth,
-	if (imageWidth * scale < clipWidth) {
+		imageHeight
-		scale = clipWidth / imageWidth;
+	};
-	}
+}
-	if (imageHeight * scale < clipHeight) {
-		scale = Math.max(scale, clipHeight / imageHeight);
+/**
-	}
+ * 勾股定理求斜边
-	return scale;
+ */
-}
+export function calcPythagoreanTheorem(width, height) {
+	return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
-/**
+}
- * 计算图片尺寸
- */
+/**
-export function calcImageSize(width, height, data) {
+ * 拖动裁剪框时计算
-	let imageWidth = width,
+ */
-		imageHeight = height;
+export function clipTouchMoveOfCalculate(data, event) {
-	let {
+	const clientX = event.touches[0].clientX;
-		clipWidth,
+	const clientY = event.touches[0].clientY;
-		clipHeight,
-		sysinfo,
+	let {
-		width: oWidth,
+		clipWidth,
-		height: oHeight
+		clipHeight,
-	} = data
+		clipY: oldClipY,
-	if (imageWidth && imageHeight) {
+		clipX: oldClipX,
-		if (imageWidth / imageHeight > (clipWidth || oWidth) / (clipWidth || oHeight)) {
+		clipStart,
-			imageHeight = clipHeight || oHeight;
+		isLockRatio,
-			imageWidth = (width / height) * imageHeight;
+		maxWidth,
-		} else {
+		minWidth,
-			imageWidth = clipWidth || oWidth;
+		maxHeight,
-			imageHeight = (height / width) * imageWidth;
+		minHeight
-		}
+	} = data;
-	} else {
+	maxWidth = maxWidth / 2;
-		let sys = sysinfo || uni.getSystemInfoSync();
+	minWidth = minWidth / 2;
-		imageWidth = sys.windowWidth;
+	minHeight = minHeight / 2;
-		imageHeight = 0;
+	maxHeight = maxHeight / 2;
-	}
-	return {
+	let width = clipWidth,
-		imageWidth,
+		height = clipHeight,
-		imageHeight
+		clipY = oldClipY,
-	};
+		clipX = oldClipX,
-}
+		// 获取裁剪框实际宽度/高度
+		// 如果大于最大值则使用最大值
-/**
+		// 如果小于最小值则使用最小值
- * 勾股定理求斜边
+		sizecorrect = () => {
- */
+			width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
-export function calcPythagoreanTheorem(width, height) {
+			height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
-	return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+		},
-}
+		sizeinspect = () => {
+			sizecorrect();
-/**
+			if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
- * 拖动裁剪框时计算
+				return false;
- */
+			} else {
-export function clipTouchMoveOfCalculate(data, event) {
+				return true;
-	const clientX = event.touches[0].clientX;
+			}
-	const clientY = event.touches[0].clientY;
+		};
+	//if (clipStart.corner) {
-	const {
+	height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
-		clipWidth,
+	//}
-		clipHeight,
+	switch (clipStart.corner) {
-		cutY: oldCutY,
+		case 1:
-		cutX: oldCutX,
+			width = clipStart.width - clipStart.x + clientX;
-		cutstart,
+			if (isLockRatio) {
-		isLockRatio
+				height = width / (clipWidth / clipHeight);
-	} = data;
+			}
-	let {
+			if (!sizeinspect()) return;
-		maxWidth,
+			break;
-		minWidth,
+		case 2:
-		maxHeight,
+			width = clipStart.width - clipStart.x + clientX;
-		minHeight
+			if (isLockRatio) {
-	} = data;
+				height = width / (clipWidth / clipHeight);
-	maxWidth = maxWidth / 2;
+			}
-	minWidth = minWidth / 2;
+			if (!sizeinspect()) {
-	minHeight = minHeight / 2;
+				return;
-	maxHeight = maxHeight / 2;
+			} else {
+				clipY = clipStart.clipY - (height - clipStart.height);
-	let width = clipWidth,
+			}
-		height = clipHeight,
-		cutY = oldCutY,
+			break;
-		cutX = oldCutX,
+		case 3:
-		sizecorrect = () => {
+			width = clipStart.width + clipStart.x - clientX;
-			width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+			if (isLockRatio) {
-			height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
+				height = width / (clipWidth / clipHeight);
-		},
+			}
-		sizeinspect = () => {
+			if (!sizeinspect()) {
-			sizecorrect();
+				return;
-			if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
+			} else {
-				return false;
+				clipY = clipStart.clipY - (height - clipStart.height);
-			} else {
+				clipX = clipStart.clipX - (width - clipStart.width);
-				return true;
+			}
-			}
-		};
+			break;
-	if (cutstart.corner) {
+		case 4:
-		height = cutstart.height + (cutstart.corner > 1 && cutstart.corner < 4 ? 1 : -1) * (cutstart.y - clientY);
+			width = clipStart.width + clipStart.x - clientX;
-	}
+			if (isLockRatio) {
-	switch (cutstart.corner) {
+				height = width / (clipWidth / clipHeight);
-		case 1:
+			}
-			width = cutstart.width - cutstart.x + clientX;
+			if (!sizeinspect()) {
-			if (isLockRatio) {
+				return;
-				height = width / (clipWidth / clipHeight);
+			} else {
-			}
+				clipX = clipStart.clipX - (width - clipStart.width);
-			if (!sizeinspect()) return;
+			}
 			break;
-		case 2:
+		default:
-			width = cutstart.width - cutstart.x + clientX;
+			break;
-			if (isLockRatio) {
+	}
-				height = width / (clipWidth / clipHeight);
+	return {
-			}
+		width,
-			if (!sizeinspect()) {
+		height,
-				return;
+		clipX,
-			} else {
+		clipY
-				cutY = cutstart.cutY - (height - cutstart.height);
+	};
-			}
+}
-			break;
+/**
-		case 3:
+ * 单指拖动图片计算偏移
-			width = cutstart.width + cutstart.x - clientX;
+ */
-			if (isLockRatio) {
+export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
-				height = width / (clipWidth / clipHeight);
+	let left = clientXForLeft - data.touchRelative[0].x,
-			}
+		top = clientYForLeft - data.touchRelative[0].y;
-			if (!sizeinspect()) {
+	return {
-				return;
+		left,
-			} else {
+		top
-				cutY = cutstart.cutY - (height - cutstart.height);
+	};
-				cutX = cutstart.cutX - (width - cutstart.width);
+}
-			}
-			break;
-		case 4:
-			width = cutstart.width + cutstart.x - clientX;
-			if (isLockRatio) {
-				height = width / (clipWidth / clipHeight);
-			}
-			if (!sizeinspect()) {
-				return;
-			} else {
-				cutX = cutstart.cutX - (width - cutstart.width);
-			}
-			break;
-		default:
-			break;
-	}
-	return {
-		width,
-		height,
-		cutX,
-		cutY
-	};
-}
-/**
- * 单指拖动图片计算偏移
- */
-export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
-	let left = clientXForLeft - data.touchRelative[0].x,
-		top = clientYForLeft - data.touchRelative[0].y;
-	return {
-		left,
-		top
-	};
-}
--- a/pages/ucenter/userinfo/uploadCutImageToUnicloud.vue
+++ b/pages/ucenter/userinfo/uploadCutImageToUnicloud.vue
@@ -11,20 +11,14 @@ export default {
 	data() {return {path: '',options:{"width":600,"height":600}}},
 	onLoad({path,options}) {
 		this.path = path
+		console.log('path-path-path-path',path);
 		if(options){
 			this.options = JSON.parse(options)
 		}
 	},
 	methods:{
 		successFn(e){
-			// uni.getImageInfo({
-			// 	src:e.url,
-			// 	complete: (e) => {
-			// 		console.log(e);
-			// 	}
-			// })
 			this.uploadImgToUnicloud(e.url,(url)=>{
-				//console.log(url);
 				this.getOpenerEventChannel().emit('uploadAvatarAfter', {url})
 				uni.navigateBack()
 			})