fix

src/tool/util.js

@@ -428,6 +428,108 @@ const setGradual = (colorObj,colorWidth,colorHeight)=>{
 	const dataURL = canvas.toDataURL('image/jpg');
 	return dataURL
 }
+function segmentImage(markerImage,fullImage,size){
+	return new Promise((resolve, reject) => {
+		const markerCanvas = document.createElement('canvas');
+		const fullCanvas = document.createElement('canvas');
+		const nullCanvas = document.createElement('canvas');
+		const ctx1 = markerCanvas.getContext('2d');
+		const ctx2 = fullCanvas.getContext('2d');
+		const ctx3 = nullCanvas.getContext('2d');
+		let targetMarkerUrl = ''
+		let targetFullUrl = ''
+		const marker = new Image();
+		const full = new Image();
+		marker.width = size.width;
+		marker.height = size.height;
+		full.width = size.width;
+		full.height = size.height;
+		console.log(full);
+		marker.crossOrigin = 'anonymous';
+		full.crossOrigin = 'anonymous';
+		marker.onload = () => {
+			ctx1.drawImage(marker,0,0 ,size.width, size.height);
+			full.onload = () => {
+				ctx2.drawImage(full,0,0, size.width, size.height);
+				segmentImage();
+			};
+		};
+		marker.src = markerImage; 
+		full.src = fullImage;
+		function segmentImage() {
+				
+			const markerData = ctx1.getImageData(0, 0, size.width, size.height);
+			const fullData = ctx2.getImageData(0, 0, size.width, size.height);
+
+			const color1 = { r: 255, g: 0, b: 0 }; // 第一个颜色
+			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
+
+			const threshold = 50; // 颜色匹配的容差
+
+			const isColorMatch = (r, g, b, color) => 
+				Math.abs(r - color.r) < threshold &&
+				Math.abs(g - color.g) < threshold &&
+				Math.abs(b - color.b) < threshold;
+
+			const output1 = ctx3.createImageData(size.width, size.height);
+			const output2 = ctx3.createImageData(size.width, size.height);
+			for (let i = 0; i < markerData.data.length; i += 4) {
+				const r = markerData.data[i];
+				const g = markerData.data[i + 1];
+				const b = markerData.data[i + 2];
+
+				if (isColorMatch(r, g, b, color1)) {
+					// 将完整图像中对应的像素复制到第一个输出图像
+					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];
+					
+					// 第二个图像的像素置为透明
+					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)) {
+					// 将完整图像中对应的像素复制到第二个输出图像
+					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];
+
+					// 第一个图像的像素置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+				} else {
+					// 两个图像的像素都置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+
+					output2.data[i] = 0;
+					output2.data[i + 1] = 0;
+					output2.data[i + 2] = 0;
+					output2.data[i + 3] = 0;
+				}
+			}
+			const createImageURL = (imageData) => {
+				const canvas = document.createElement('canvas');
+				canvas.width = size.width;
+				canvas.height = size.height;
+				const ctx = canvas.getContext('2d');
+				ctx.putImageData(imageData, 0, 0);
+				return canvas.toDataURL('image/png');
+			};
+			targetMarkerUrl =createImageURL(output1)
+			targetFullUrl =createImageURL(output2)
+			console.log(targetFullUrl,targetMarkerUrl);
+			resolve({targetMarkerUrl, targetFullUrl})
+		}
+	})
+}
 export {
 	isEmail,
 	getUploadUrl,
@@ -445,4 +547,5 @@ export {
 	murmur,
 	setGradual,
 	calculateGradientCoordinate,
+	segmentImage,
 }