改成13*13符合设备端
This commit is contained in:
@ -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();
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
|
||||
<view class="clear"></view>
|
||||
<textToDotMatrixFor7305 class="TextToHex" ref="textToHex" :txts="formData.textLines"
|
||||
:bgColor="'#FFFFFF'" :color="'#000000'" :fontSize="11" ></textToDotMatrixFor7305>
|
||||
:bgColor="'#000000'" :color="'#FFFFFF'" :fontSize="11" ></textToDotMatrixFor7305>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
|
||||
Reference in New Issue
Block a user