深度画布智能选区

src/components/Canvas/DepthCanvas/tools/canvasMethod.js

@@ -93,3 +93,157 @@ export function angleBetweenPointsDegrees(x1, y1, x2, y2) {
 
 	return deg;
 }
+
+
+
+/**
+ * 获取对象黑白通道画布
+ * @param {fabric.Object} object - 要处理的 fabric 对象
+ * @param {ImageData} revData - 相反的ImageData，白通道的相同位置是否为透明，revData为白色为透明，黑色为不透明
+ * @param {number} diff - 差值，默认 25
+ * @param {Object} rgba - 自定义 rgba 值，默认 { r: 255, g: 255, b: 255, a: 255 }
+ * @param {boolean} isMerge - 是否合并，true=合并revData，false=反转revData
+ * @returns {HTMLCanvasElement|null} 包含黑白通道的画布，或 null 如果失败
+*/
+export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }, isMerge = false) {
+	const image = object.getElement();
+	if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") {
+		console.warn("对象不是图片");
+		return null;
+	}
+	const { width, height } = image;
+	if (!width || !height) {
+		console.warn("对象没有元素");
+		return null;
+	}
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
+	ctx.drawImage(image, 0, 0, width, height);
+	const data = ctx.getImageData(0, 0, width, height);
+	for (let i = 0; i < data.data.length; i += 4) {
+		const r = data.data[i + 0];
+		const g = data.data[i + 1];
+		const b = data.data[i + 2];
+		const a = data.data[i + 3];
+		const revR = revData?.data[i + 0] || 0;
+		const revG = revData?.data[i + 1] || 0;
+		const revB = revData?.data[i + 2] || 0;
+		const revA = revData?.data[i + 3] || 0;
+		let isHave = false;
+		if (r || g || b || a) {
+			if (revR > diff || revG > diff || revB > diff || revA > diff) {
+				isHave = false;
+			} else {
+				isHave = true;
+			}
+		}
+		if (isMerge && (revR || revG || revB || revA)) isHave = true;
+		if (isHave) {
+			data.data[i + 0] = rgba.r;
+			data.data[i + 1] = rgba.g;
+			data.data[i + 2] = rgba.b;
+			data.data[i + 3] = rgba.a;
+		} else {
+			data.data[i + 0] = 0;
+			data.data[i + 1] = 0;
+			data.data[i + 2] = 0;
+			data.data[i + 3] = 0;
+		}
+	}
+	ctx.clearRect(0, 0, width, height);
+	ctx.putImageData(data, 0, 0);
+	return canvas;
+}
+
+
+/**
+ * 图片边界跟踪算法(透明底)
+ * @param {HTMLCanvasElement} canvas - canvas元素
+ * @param {Number} scale - 缩放比例
+ * @returns {Array} 边界点数组 [{x, y}, ...]
+*/
+export function traceImageContour(canvas) {
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
+	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+	const data = imageData.data;
+	const width = canvas.width;
+	const height = canvas.height;
+
+	// 查找起始点（第一个不透明像素）
+	let startX = -1;
+	let startY = -1;
+
+	outer: for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const index = (y * width + x) * 4;
+			if (data[index + 3] > 0) {
+				startX = x;
+				startY = y;
+				break outer;
+			}
+		}
+	}
+
+	if (startX === -1) return []; // 没有不透明像素
+
+	// Moore-Neighbor边界跟踪算法
+	const contour = [];
+	const visited = new Set();
+	const directions = [
+		[-1, 0],
+		[-1, -1],
+		[0, -1],
+		[1, -1],
+		[1, 0],
+		[1, 1],
+		[0, 1],
+		[-1, 1],
+	];
+
+	let currentX = startX;
+	let currentY = startY;
+	let backtrackDir = 4; // 起始方向：右
+
+	do {
+		const pointKey = `${currentX},${currentY}`;
+		if (!visited.has(pointKey)) {
+			contour.push({ x: currentX, y: currentY });
+			visited.add(pointKey);
+		}
+
+		// 从右方向开始顺时针查找
+		let found = false;
+		for (let i = 0; i < 8; i++) {
+			const dir = (backtrackDir + i) % 8;
+			const dx = directions[dir][0];
+			const dy = directions[dir][1];
+			const checkX = currentX + dx;
+			const checkY = currentY + dy;
+
+			if (
+				checkX >= 0 &&
+				checkX < width &&
+				checkY >= 0 &&
+				checkY < height
+			) {
+				const index = (checkY * width + checkX) * 4;
+				if (data[index + 3] > 0) {
+					currentX = checkX;
+					currentY = checkY;
+					backtrackDir = (dir + 5) % 8; // 下一个开始查找的方向
+					found = true;
+					break;
+				}
+			}
+		}
+
+		if (!found) break;
+	} while (
+		!(currentX === startX && currentY === startY) &&
+		visited.size < width * height
+	);
+
+	return contour;
+}