@ -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 ( ) ;