恢复7305代码冲突

components/TextToHex/textToDotMatrixFor7305.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<canvas canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
+		<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
 			class="offscreen-canvas"></canvas>
 	</view>
 </template>
@@ -27,16 +27,6 @@
 			color: {
 				type: String,
 				default: "#000000"
-			},
-			// 二值化阈值（0~1），越大越细；默认偏清晰
-			threshold: {
-				type: Number,
-				default: 0.45
-			},
-			// 是否启用轻度笔画修复（3x3 膨胀）；默认关闭以避免变粗
-			sharpen: {
-				type: Boolean,
-				default: false
 			}
 		},
 		data() {
@@ -58,16 +48,6 @@
 			this.ctx = uni.createCanvasContext('reusableCanvas', this);
 		},
 		methods: {
-			/**
-			 * 外部可调用：复位画布为纯背景并立即提交
-			 */
-			async resetCanvas() {
-				if (!this.ctx) return;
-				this.clearCanvas();
-				await new Promise((resolve) => {
-					this.ctx.draw(true, () => setTimeout(resolve, 30));
-				});
-			},
 			/**
 			 * 估算单行文本所需的Canvas宽度
 			 */
@@ -79,8 +59,6 @@
 			 * 清除Canvas内容
 			 */
 			clearCanvas() {
-				// 先清除，再用背景色填充，确保无残留
-				this.ctx.clearRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 				this.ctx.setFillStyle(this.bgColor);
 				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 			},
@@ -89,11 +67,6 @@
 			 * 复用单个Canvas处理所有文本行
 			 */
 			async drawAndGetPixels() {
-				// 发送前：确保画布处于干净背景态
-				await this.resetCanvas();
-				// 超采样比例（提高分辨率再降采样，减少模糊）
-				const SCALE = 3;
-				const PADDING_X = 1 * SCALE; // 左侧预留像素，避免首字裁剪
 				let binaryToHex = (binaryArray) => {
 					if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
 						throw new Error("输入必须是包含8个元素的二进制数组");
@@ -117,107 +90,25 @@
 					return hexString;
 				}
 
-				let convertCharToMatrix = (drawResult, item) => {
-					// 设备端使用13x13点阵渲染（保持输出13列×13行），但只在内部采样12×12，保留右侧与底部1像素缓冲
+				let convertCharToMatrix = (imageData, item) => {
 					const charWidth = 13;
-					const charHeight = 13;
-					const effectiveWidth = 12;   // 仅采样前12列
-					const effectiveHeight = 12; // 仅采样前12行
-					const { pixelData, width, height } = drawResult;
-					// 将高分辨率像素降采样为13x13的布尔矩阵
-					const target = new Array(charWidth * charHeight).fill(0);
-					const threshold = Math.max(0.2, Math.min(0.8, this.threshold || 0.45));
-					
-					// 确保采样区域严格对齐，从PADDING_X开始，只采样12列（右侧预留1px），12行（底部预留1px）
-					// 字符实际绘制区域：从PADDING_X开始，宽度为12*SCALE
-					const charStartX = PADDING_X;
-					const charEndX = PADDING_X + effectiveWidth * SCALE; // 仅采样到第12列
-					
-					for (let y = 0; y < charHeight; y++) {
-						for (let x = 0; x < charWidth; x++) {
-							// 超出有效采样区域（第13列或第13行）直接置0，作为缓冲
-							if (x >= effectiveWidth || y >= effectiveHeight) {
-								target[y * charWidth + x] = 0;
-								continue;
-							}
-							let onCount = 0;
-							let total = 0;
-							// 采样区域：字符从PADDING_X开始绘制，每列宽度为SCALE
-							const startX = PADDING_X + x * SCALE;
-							const startY = y * SCALE;
-							
-							for (let sy = 0; sy < SCALE; sy++) {
-								for (let sx = 0; sx < SCALE; sx++) {
-									const px = startX + sx;
-									const py = startY + sy;
-									
-									// 边界检查：确保不超出Canvas边界，且不超出字符实际绘制区域
-									if (px < 0 || py < 0 || px >= width || py >= height) {
-										// 边界外视为背景（黑色）
-										continue;
-									}
-									// 额外检查：确保不采样到字符右侧的残留区域
-									if (px >= charEndX) {
-										// 超出字符区域，视为背景
-										continue;
-									}
-									
-									const idx = (py * width + px) * 4;
-									const R = pixelData[idx];
-									const G = pixelData[idx + 1];
-									const B = pixelData[idx + 2];
-									const A = pixelData[idx + 3] || 255;
-									// 计算亮度
-									const luminance = 0.299 * R + 0.587 * G + 0.114 * B;
-									const alpha = A / 255;
-									// 背景是黑色，文字是白色，所以判断亮色（>=128）为文字点
-									if (luminance >= 128 && alpha > 0.5) onCount++;
-									total++;
-								}
-							}
-							// 当亮色占比超过阈值时判为1（至少需要采样到一些像素）
-							target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0;
-						}
-					}
-
-					// 轻度笔画修复：可选 3x3 膨胀（启用时阈值更严格，避免变粗）
-					if (this.sharpen) {
-						const dilated = target.slice();
-						for (let y = 0; y < effectiveHeight; y++) {
-							for (let x = 0; x < effectiveWidth; x++) {
-								const idx = y * charWidth + x;
-								if (target[idx] === 1) continue;
-								let neighbors = 0;
-								for (let dy = -1; dy <= 1; dy++) {
-									for (let dx = -1; dx <= 1; dx++) {
-										if (dx === 0 && dy === 0) continue;
-										const nx = x + dx;
-										const ny = y + dy;
-										if (nx < 0 || ny < 0 || nx >= effectiveWidth || ny >= effectiveHeight) continue;
-										if (target[ny * charWidth + nx] === 1) neighbors++;
-									}
-								}
-								// 使用更严格的邻居门限，避免整体变粗
-								if (neighbors >= 5) {
-									dilated[idx] = 1;
-								}
-							}
-						}
-						for (let i = 0; i < target.length; i++) target[i] = dilated[i];
+					const charHeight = 12;
+					const pixels = [];
+					for (let i = 0; i < imageData.length; i += 4) {
+						const R = imageData[i];
+						pixels.push(R < 128 ? 1 : 0);
 					}
 
 					const lowBytes = new Array(charWidth).fill(0);
 					const highBytes = new Array(charWidth).fill(0);
-					// 按列打包，每列13行分成上下两字节：低字节0-7行（8行），高字节8-12行（5行）
+
 					for (let col = 0; col < charWidth; col++) {
 						for (let row = 0; row < charHeight; row++) {
-							const pixel = target[row * charWidth + col];
+							const pixel = pixels[row * charWidth + col];
 							if (pixel === 1) {
 								if (row < 8) {
-									// 低字节：0-7行，从低位到高位
 									lowBytes[col] |= (1 << row);
 								} else {
-									// 高字节：8-12行，从低位到高位（使用5位，剩余3位未使用）
 									highBytes[col] |= (1 << (row - 8));
 								}
 							}
@@ -230,32 +121,34 @@
 					let result = {};
 					let ctx = this.ctx;
 
-					// 1. 动态调整Canvas尺寸（高分辨率）
-					// 设备端使用13x13点阵渲染
-					this.currentCanvasWidth = 13 * SCALE + PADDING_X;
-					this.currentCanvasHeight = 13 * SCALE;
+					// 1. 动态调整Canvas尺寸
+					this.currentCanvasWidth = 13;
+					this.currentCanvasHeight = 12;
 
 					// 2. 清空Canvas（绘制背景）
 					this.clearCanvas();
 
-					// 3. 设置文字样式（整数像素对齐，顶部基线，避免首字裁剪）
+					// 3. 设置文字样式
 					ctx.setFillStyle(this.color);
-					ctx.setTextBaseline('top');
-					ctx.setTextAlign('left');
-					const fs = Math.max(1, Math.round(this.fontSize)) * SCALE;
-					ctx.setFontSize(fs);
-					ctx.font = `${fs}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
+					ctx.setTextBaseline('middle');
+					// ctx.setTextAlign('center')
+					ctx.setFontSize(this.fontSize);
+					ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
 
-					// 4. 绘制单个字符（每个字符独立绘制在固定位置）
-					// 确保字符始终从PADDING_X开始绘制，Y坐标为0，保证采样一致性
-					const charX = PADDING_X;
-					const charY = 0;
-					ctx.fillText(textLine, charX, charY);
+					// 4. 绘制当前行文本
+					let currentX = 0;
+					let currentY = this.fontSize / 2 + 1;
+					for (let j = 0; j < textLine.length; j++) {
+						let char = textLine[j];
+						ctx.fillText(char, currentX, currentY);
+						// 按实际字符宽度计算间距
+						let charWidth = ctx.measureText(char).width;
+						currentX += charWidth;
+					}
 
 					// 5. 异步绘制并获取像素数据（串行处理避免冲突）
-					const grabPixels = () => new Promise((resolve, reject) => {
-						// 立即绘制并给一点缓冲时间，避免取像素过早
-						ctx.draw(true, () => {
+					await new Promise((resolve, reject) => {
+						ctx.draw(false, () => {
 							setTimeout(() => {
 								uni.canvasGetImageData({
 									canvasId: 'reusableCanvas',
@@ -272,23 +165,15 @@
 										};
 										resolve();
 									},
-									fail: err => reject(err)
+									fail: err => {
+										// console.error(`处理第${i+1}行失败:`, err);
+										reject(err)
+									}
 								});
-							}, 70);
+							}, 100);
 						});
 					});
 
-					await grabPixels();
-					// 一次性校验：若像素全黑或明显异常，重绘重取一次
-					let nonZero = false;
-					for (let i = 0; i < result.pixelData.length; i += 4) {
-						if (result.pixelData[i] || result.pixelData[i+1] || result.pixelData[i+2]) { nonZero = true; break; }
-					}
-					if (!nonZero) {
-						await new Promise(r => setTimeout(r, 50));
-						await grabPixels();
-					}
-
 					return result;
 				}
 				let arr = [];
@@ -299,23 +184,13 @@
 					let item = this.validTxts[i];
 					// console.log("item=", item);
 					for (var j = 0; j < item.length; j++) {
-						let char = item[j];
-						let result = await drawTxt(char);
-						let matrix = convertCharToMatrix(result, item);
-						// 调试：打印每个字符的点阵数据
-						console.log(`[点阵生成] 字符"${char}" 点阵数据:`, matrix.map(b => '0x' + b.toString(16).padStart(2, '0')).join(' '));
-						linePixls.push(matrix);
-						// 在字符间增加轻微延时，避免相邻提取竞争（尤其是末字符）
-						await new Promise(r => setTimeout(r, 20));
+						let result = await drawTxt(item[j]);
+						linePixls.push(convertCharToMatrix(result.pixelData, item));
 					}
 					// console.log("hexs=", linePixls.join(","));
 					arr.push(linePixls);
-					// 每行结束再等一会，提高末字符稳定性
-					await new Promise(r => setTimeout(r, 40));
 				}
 
-				// 发送后：再次清空画布，避免残留影响下一次
-				await this.resetCanvas();
 				return arr;
 			}
 		}
@@ -327,5 +202,6 @@
 		position: fixed;
 		left: -9999px;
 		top: -9999px;
+		visibility: hidden;
 	}
 </style>