uni-image-editor 1.0.0

package/components/image-clipper/img/photo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#606060;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
+		c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
+		c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
+		C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
+		c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
+	<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
+		C24.6,21.3,24.5,21.5,24.3,21.5z"/>
+</g>
+</svg>

package/components/image-clipper/img/rotate.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>

package/components/image-clipper/index.scss

@@ -0,0 +1,184 @@
+$clipper-edge-border-width: 6rpx !default;
+$clipper-confirm-color: #07c160 !default;
+
+.flex-auto {
+	flex:auto
+}
+	
+.bg-transparent {
+	background-color: rgba(0, 0, 0, 0.9);
+	transition-duration: 0.35s;
+}
+
+.lime-clipper {
+	width: 100vw;
+	height: calc( 100vh - var(--window-top));
+	background-color: rgba(0, 0, 0, 0.9);
+	position: fixed;
+	top: var(--window-top);
+	left: 300vw;
+	z-index: 1;
+	&.open {
+		left: 0;
+	}	
+	&-mask {
+		position: relative;
+		z-index: 2;
+		pointer-events: none;
+	}
+	&__content {
+		pointer-events: none;
+		position: absolute;
+		border: 1rpx solid rgba(255,255,255,.3);
+		box-sizing: border-box;
+		box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 80vh;
+		background: transparent;	
+		// transition-duration 0.35s
+		// transition-property left,top
+		&::before,&::after {
+			content: '';
+			position: absolute;
+			border: 1rpx dashed rgba(255,255,255,.3);
+		}
+			
+		&::before {
+			width: 100%;
+			top: 33.33%;
+			height: 33.33%;
+			border-left: none;
+			border-right: none;
+		}
+			
+		&::after {
+			width: 33.33%;
+			left: 33.33%;
+			height: 100%;
+			border-top:none;
+			border-bottom: none;
+		}
+			
+	}
+		
+	&__edge {
+		position: absolute;
+		// left 6rpx
+		width: 34rpx;
+		height: 34rpx;
+		border: $clipper-edge-border-width solid #ffffff;
+		pointer-events: auto;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 40rpx;
+			height: 40rpx;
+			background-color: transparent;
+		}
+			
+		&:nth-child(1) {
+			left: - $clipper-edge-border-width;
+			top: - $clipper-edge-border-width;
+			border-bottom-width: 0 !important;
+			border-right-width: 0 !important;
+			&:before {
+				top: -50%;
+				left: -50%;
+			}
+		}
+			
+		&:nth-child(2) {
+			right: - $clipper-edge-border-width;
+			top: - $clipper-edge-border-width;
+			border-bottom-width: 0 !important;
+			border-left-width: 0 !important;
+			&:before {
+				top: -50%;
+				left: 50%;
+			}
+				
+		}
+			
+		&:nth-child(3) {
+			left: - $clipper-edge-border-width;
+			bottom: - $clipper-edge-border-width;
+			border-top-width: 0 !important;
+			border-right-width: 0 !important;
+			&:before {
+				bottom: -50%;
+				left: -50%;
+			}
+		}
+			
+		&:nth-child(4) {
+			right: - $clipper-edge-border-width;
+			bottom: - $clipper-edge-border-width;
+			border-top-width: 0 !important;
+			border-left-width: 0 !important;
+			&:before {
+				bottom: -50%;
+				left: 50%;
+			}
+		}
+			
+	}
+		
+	&-image {
+		width: 100%;
+		max-width: inherit;
+		border-style: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+		transform-origin: center;
+	}
+		
+	&-canvas {
+		position: fixed;
+		z-index: 10;
+		left: -200vw;
+		top: -200vw;
+		pointer-events: none;
+	}
+		
+	&-tools {
+		position: absolute;
+		left: 0;
+		bottom: 10px;
+		width: 100%;
+		z-index: 99;
+		color: #fff;
+		&__btns {
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			padding: 20rpx 40rpx;
+			box-sizing: border-box;
+			.cancel {
+				width: 112rpx;
+				height: 60rpx;
+				text-align: center;
+				line-height: 60rpx;
+			}
+				
+			.confirm {
+				width: 112rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				background: var(--lime-clipper-confirm-color, $clipper-confirm-color);
+				border-radius: 6rpx;
+				text-align: center;
+			}
+				
+			image {
+				display: block;
+				width: 60rpx;
+				height: 60rpx;
+			}
+		}	
+	}		
+}
+	

package/components/image-clipper/utils.js

@@ -0,0 +1,280 @@
+/**
+ * 判断手指触摸位置
+ */
+export function determineDirection(
+  clipX,
+  clipY,
+  clipWidth,
+  clipHeight,
+  currentX,
+  currentY
+) {
+  /*
+   * (右下>>1 右上>>2 左上>>3 左下>>4)
+   */
+  let corner;
+  /**
+   * 思路：（利用直角坐标系）
+   *  1.找出裁剪框中心点
+   *  2.如点击坐标在上方点与左方点区域内，则点击为左上角
+   *  3.如点击坐标在下方点与右方点区域内，则点击为右下角
+   *  4.其他角同理
+   */
+  const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
+  const currentPoint = [currentX, currentY]; // 触摸点
+
+  if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
+    corner = 3; // 左上
+  } else if (
+    currentPoint[0] >= mainPoint[0] &&
+    currentPoint[1] <= mainPoint[1]
+  ) {
+    corner = 2; // 右上
+  } else if (
+    currentPoint[0] <= mainPoint[0] &&
+    currentPoint[1] >= mainPoint[1]
+  ) {
+    corner = 4; // 左下
+  } else if (
+    currentPoint[0] >= mainPoint[0] &&
+    currentPoint[1] >= mainPoint[1]
+  ) {
+    corner = 1; // 右下
+  }
+
+  return corner;
+}
+
+/**
+ * 图片边缘检测检测时，计算图片偏移量
+ */
+export function calcImageOffset(data, scale) {
+  let left = data.imageLeft;
+  let top = data.imageTop;
+  scale = scale || data.scale;
+
+  let imageWidth = data.imageWidth;
+  let imageHeight = data.imageHeight;
+  if ((data.angle / 90) % 2) {
+    imageWidth = data.imageHeight;
+    imageHeight = data.imageWidth;
+  }
+  const { clipX, clipWidth, clipY, clipHeight } = data;
+
+  // 当前图片宽度/高度
+  const currentImageSize = (size) => (size * scale) / 2;
+  const currentImageWidth = currentImageSize(imageWidth);
+  const currentImageHeight = currentImageSize(imageHeight);
+
+  left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
+  left =
+    clipX + clipWidth - currentImageWidth <= left
+      ? left
+      : clipX + clipWidth - currentImageWidth;
+  top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
+  top =
+    clipY + clipHeight - currentImageHeight <= top
+      ? top
+      : clipY + clipHeight - currentImageHeight;
+  return {
+    left,
+    top,
+    scale,
+  };
+}
+
+/**
+ * 图片边缘检测时，计算图片缩放比例
+ */
+export function calcImageScale(data, scale) {
+  scale = scale || data.scale;
+  let { imageWidth, imageHeight, clipWidth, clipHeight, angle } = data;
+  if ((angle / 90) % 2) {
+    [imageWidth, imageHeight] = [imageHeight, imageWidth];
+  }
+  if (
+    angle !== 0 &&
+    scale == Math.max(clipWidth / imageHeight, clipHeight / imageWidth)
+  ) {
+    return Math.max(clipWidth / imageWidth, clipHeight / imageHeight);
+  }
+  if (imageWidth * scale < clipWidth) {
+    scale = clipWidth / imageWidth;
+  }
+  if (imageHeight * scale < clipHeight) {
+    scale = Math.max(scale, clipHeight / imageHeight);
+  }
+  return scale;
+}
+
+/**
+ * 计算图片尺寸
+ */
+export function calcImageSize(width, height, data) {
+  let imageWidth = width,
+    imageHeight = height;
+  let {
+    clipWidth,
+    clipHeight,
+    sysinfo,
+    width: originWidth,
+    height: originHeight,
+  } = data;
+  const cw = clipWidth || originWidth;
+  const ch = clipHeight || originHeight;
+  if (imageWidth && imageHeight) {
+    if (imageWidth / imageHeight > cw / ch) {
+      imageHeight = clipHeight || originHeight;
+      imageWidth = (width / height) * imageHeight;
+    } else {
+      imageWidth = cw;
+      imageHeight = (height / width) * imageWidth;
+    }
+  } else {
+    let sys = sysinfo || uni.getSystemInfoSync();
+    imageWidth = sys.windowWidth;
+    imageHeight = 0;
+  }
+  return {
+    imageWidth,
+    imageHeight,
+  };
+}
+
+/**
+ * 勾股定理求斜边
+ */
+export function calcPythagoreanTheorem(width, height) {
+  return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+/**
+ * 拖动裁剪框时计算
+ */
+export function clipTouchMoveOfCalculate(data, event) {
+  const clientX = event.touches[0].clientX;
+  const clientY = event.touches[0].clientY;
+
+  let {
+    clipWidth,
+    clipHeight,
+    clipY: oldClipY,
+    clipX: oldClipX,
+    clipStart,
+    isLockRatio,
+    maxWidth,
+    minWidth,
+    maxHeight,
+    minHeight,
+  } = data;
+  maxWidth = uni.upx2px(maxWidth); // maxWidth / 2;
+  minWidth = uni.upx2px(minWidth); // minWidth / 2;
+  minHeight = uni.upx2px(minHeight); // minHeight / 2;
+  maxHeight = uni.upx2px(maxHeight); // maxHeight / 2;
+
+  let width = clipWidth,
+    height = clipHeight,
+    clipY = oldClipY,
+    clipX = oldClipX,
+    // 获取裁剪框实际宽度/高度
+    // 如果大于最大值则使用最大值
+    // 如果小于最小值则使用最小值
+    sizecorrect = () => {
+      width =
+        width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+      height =
+        height <= maxHeight
+          ? height >= minHeight
+            ? height
+            : minHeight
+          : maxHeight;
+    },
+    sizeinspect = () => {
+      if (
+        (width > maxWidth ||
+          width < minWidth ||
+          height > maxHeight ||
+          height < minHeight) &&
+        isLockRatio
+      ) {
+        sizecorrect();
+        return false;
+      } else {
+        sizecorrect();
+        return true;
+      }
+    };
+  //if (clipStart.corner) {
+  height =
+    clipStart.height +
+    (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) *
+      (clipStart.y - clientY);
+  //}
+  switch (clipStart.corner) {
+    case 1:
+      width = clipStart.width - clipStart.x + clientX;
+      if (isLockRatio) {
+        height = width / (clipWidth / clipHeight);
+      }
+      if (!sizeinspect()) return;
+      break;
+    case 2:
+      width = clipStart.width - clipStart.x + clientX;
+      if (isLockRatio) {
+        height = width / (clipWidth / clipHeight);
+      }
+      if (!sizeinspect()) {
+        return;
+      } else {
+        clipY = clipStart.clipY - (height - clipStart.height);
+      }
+
+      break;
+    case 3:
+      width = clipStart.width + clipStart.x - clientX;
+      if (isLockRatio) {
+        height = width / (clipWidth / clipHeight);
+      }
+      if (!sizeinspect()) {
+        return;
+      } else {
+        clipY = clipStart.clipY - (height - clipStart.height);
+        clipX = clipStart.clipX - (width - clipStart.width);
+      }
+
+      break;
+    case 4:
+      width = clipStart.width + clipStart.x - clientX;
+      if (isLockRatio) {
+        height = width / (clipWidth / clipHeight);
+      }
+      if (!sizeinspect()) {
+        return;
+      } else {
+        clipX = clipStart.clipX - (width - clipStart.width);
+      }
+      break;
+    default:
+      break;
+  }
+  return {
+    width,
+    height,
+    clipX,
+    clipY,
+  };
+}
+
+/**
+ * 单指拖动图片计算偏移
+ */
+export function imageTouchMoveOfCalcOffset(
+  data,
+  clientXForLeft,
+  clientYForLeft
+) {
+  return {
+    left: clientXForLeft - data.touchRelative[0].x,
+    top: clientYForLeft - data.touchRelative[0].y,
+  };
+}