diff --git a/components/TextToHex/textToDotMatrixFor7305.vue b/components/TextToHex/textToDotMatrixFor7305.vue index 86e2e95..37f98a3 100644 --- a/components/TextToHex/textToDotMatrixFor7305.vue +++ b/components/TextToHex/textToDotMatrixFor7305.vue @@ -96,14 +96,19 @@ } let convertCharToMatrix = (drawResult, item) => { + // 设备端使用13x13点阵渲染 const charWidth = 13; - const charHeight = 12; + const charHeight = 13; const { pixelData, width, height } = drawResult; - // 将高分辨率像素降采样为13x12的布尔矩阵 + // 将高分辨率像素降采样为13x13的布尔矩阵 const target = new Array(charWidth * charHeight).fill(0); - const threshold = 0.5; // 每个小块中超过50%深色判为1 + const threshold = 0.5; // 每个小块中超过50%亮色(文字)判为1 + + // 确保采样区域严格对齐,从PADDING_X开始,只采样13列 + // 字符实际绘制区域:从PADDING_X开始,宽度为13*SCALE + const charStartX = PADDING_X; + const charEndX = PADDING_X + charWidth * SCALE; - // 确保采样区域严格对齐,从PADDING_X开始,但只采样13列 for (let y = 0; y < charHeight; y++) { for (let x = 0; x < charWidth; x++) { let onCount = 0; @@ -116,31 +121,39 @@ 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; - // 使用更严格的阈值,考虑alpha通道 + // 计算亮度 const luminance = 0.299 * R + 0.587 * G + 0.114 * B; const alpha = A / 255; - // 只有深色且不透明才计入 - if (luminance < 128 && alpha > 0.5) onCount++; + // 背景是黑色,文字是白色,所以判断亮色(>=128)为文字点 + if (luminance >= 128 && alpha > 0.5) onCount++; total++; } } - // 当深色占比超过阈值时判为1(至少需要采样到一些像素) + // 当亮色占比超过阈值时判为1(至少需要采样到一些像素) target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0; } } const lowBytes = new Array(charWidth).fill(0); const highBytes = new Array(charWidth).fill(0); - // 按列打包,每列12行分成上下两字节 + // 按列打包,每列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]; @@ -149,7 +162,7 @@ // 低字节:0-7行,从低位到高位 lowBytes[col] |= (1 << row); } else { - // 高字节:8-11行,从低位到高位 + // 高字节:8-12行,从低位到高位(使用5位,剩余3位未使用) highBytes[col] |= (1 << (row - 8)); } } @@ -163,8 +176,9 @@ let ctx = this.ctx; // 1. 动态调整Canvas尺寸(高分辨率) + // 设备端使用13x13点阵渲染 this.currentCanvasWidth = 13 * SCALE + PADDING_X; - this.currentCanvasHeight = 12 * SCALE; + this.currentCanvasHeight = 13 * SCALE; // 2. 清空Canvas(绘制背景) this.clearCanvas(); diff --git a/pages/7305/BJQ7305.vue b/pages/7305/BJQ7305.vue index ed98b1f..d8a3883 100644 --- a/pages/7305/BJQ7305.vue +++ b/pages/7305/BJQ7305.vue @@ -88,7 +88,7 @@ 发送 + :bgColor="'#000000'" :color="'#FFFFFF'" :fontSize="11" >