fix

src/tool/mdEvent.js

@@ -0,0 +1,28 @@
+const getMousePosition = (e,bor,dom) => {
+	e.stopPropagation()
+	if(bor){
+		const touch = e.changedTouches[0];
+		event = {
+			offsetX:touch.clientX - e.target.getBoundingClientRect().left,
+			offsetY: touch.clientY - e.target.getBoundingClientRect().top,
+			clientX:touch.clientX,
+			clientY:touch.clientY,
+		}
+		if(dom){
+			event.offsetX = touch.clientX - dom.getBoundingClientRect().left
+			event.offsetY = touch.clientY - dom.getBoundingClientRect().top
+		}
+	}else{
+		event = {
+			offsetX:e.offsetX,
+			offsetY:e.offsetY,
+			clientX:e.clientX,
+			clientY:e.clientY,
+		}
+	}
+	return event
+}
+
+export {
+	getMousePosition,
+}

src/tool/util.js

@@ -451,6 +451,8 @@ function segmentImage(markerImage,fullImage,size){
 		marker.onload = () => {
 			ctx1.drawImage(marker,0,0 ,size.width, size.height);
 			full.onload = () => {
+			console.log(full.height,size,full.width);
+
 				ctx2.drawImage(full,0,0, size.width, size.height);
 				segmentImageItem();
 			};
@@ -466,16 +468,16 @@ function segmentImage(markerImage,fullImage,size){
 			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
 
 			const threshold = 100; // 颜色匹配的容差
-
 			// const isColorMatch = (r, g, b, color) => 
 			// 	(Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) &&
 			// 	(Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) &&
 			// 	(Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)
 
 			const isColorMatch = (r, g, b, color) => 
-				(Math.abs(r - color.r) < threshold || Math.abs(0 - color.r) < threshold) &&
-				(Math.abs(g - color.g) < threshold || Math.abs(0 - color.g) < threshold) &&
-				(Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
+				((color.r >= color.g) && r >= g) ||
+				((color.r < color.g) && r < g)
+
+				// (Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
 
 			const output1 = ctx3.createImageData(size.width, size.height);
 			const output2 = ctx3.createImageData(size.width, size.height);
@@ -483,26 +485,33 @@ function segmentImage(markerImage,fullImage,size){
 				const r = markerData.data[i];
 				const g = markerData.data[i + 1];
 				const b = markerData.data[i + 2];
-
-				if (isColorMatch(r, g, b, color1)) {
+				let a = markerData.data[i + 3];
+				a>1?a = 255:0
+				if (r>=g && a>1) {
 					// 将完整图像中对应的像素复制到第一个输出图像
 					output1.data[i] = fullData.data[i];
 					output1.data[i + 1] = fullData.data[i + 1];
 					output1.data[i + 2] = fullData.data[i + 2];
 					output1.data[i + 3] = fullData.data[i + 3];
-					
+					// output1.data[i] = 158;
+					// output1.data[i + 1] = 51;
+					// output1.data[i + 2] = 0;
+					// output1.data[i + 3] = 255;
 					// 第二个图像的像素置为透明
 					output2.data[i] = 0;
 					output2.data[i + 1] = 0;
 					output2.data[i + 2] = 0;
 					output2.data[i + 3] = 0;
-				} else if (isColorMatch(r, g, b, color2)) {
+				} else if (r<g && a>1) {
 					// 将完整图像中对应的像素复制到第二个输出图像
 					output2.data[i] = fullData.data[i];
 					output2.data[i + 1] = fullData.data[i + 1];
 					output2.data[i + 2] = fullData.data[i + 2];
 					output2.data[i + 3] = fullData.data[i + 3];
-
+					// output2.data[i] = 158;
+					// output2.data[i + 1] = 51;
+					// output2.data[i + 2] = 0;
+					// output2.data[i + 3] = 255;
 					// 第一个图像的像素置为透明
 					output1.data[i] = 0;
 					output1.data[i + 1] = 0;
@@ -527,11 +536,16 @@ function segmentImage(markerImage,fullImage,size){
 				canvas.height = size.height;
 				const ctx = canvas.getContext('2d');
 				ctx.putImageData(imageData, 0, 0);
-				return canvas.toDataURL('image/png');
+				let data = canvas.toDataURL('image/png')
+				canvas.remove()
+				return data;
 			};
 			targetBackUrl =createImageURL(output2)
 			targetFrontUrl =createImageURL(output1)
 			resolve({targetFrontUrl, targetBackUrl})
+			markerCanvas.remove()
+			fullCanvas.remove()
+			nullCanvas.remove()
 		}
 	})
 }