Compare commits
2 Commits
2b72cc1a5c
...
9037ef6ac3
| Author | SHA1 | Date | |
|---|---|---|---|
| 9037ef6ac3 | |||
| a30a631ea6 |
@ -96,14 +96,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let convertCharToMatrix = (drawResult, item) => {
|
let convertCharToMatrix = (drawResult, item) => {
|
||||||
|
// 设备端使用13x13点阵渲染
|
||||||
const charWidth = 13;
|
const charWidth = 13;
|
||||||
const charHeight = 12;
|
const charHeight = 13;
|
||||||
const { pixelData, width, height } = drawResult;
|
const { pixelData, width, height } = drawResult;
|
||||||
// 将高分辨率像素降采样为13x12的布尔矩阵
|
// 将高分辨率像素降采样为13x13的布尔矩阵
|
||||||
const target = new Array(charWidth * charHeight).fill(0);
|
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 y = 0; y < charHeight; y++) {
|
||||||
for (let x = 0; x < charWidth; x++) {
|
for (let x = 0; x < charWidth; x++) {
|
||||||
let onCount = 0;
|
let onCount = 0;
|
||||||
@ -116,31 +121,39 @@
|
|||||||
for (let sx = 0; sx < SCALE; sx++) {
|
for (let sx = 0; sx < SCALE; sx++) {
|
||||||
const px = startX + sx;
|
const px = startX + sx;
|
||||||
const py = startY + sy;
|
const py = startY + sy;
|
||||||
|
|
||||||
|
// 边界检查:确保不超出Canvas边界,且不超出字符实际绘制区域
|
||||||
if (px < 0 || py < 0 || px >= width || py >= height) {
|
if (px < 0 || py < 0 || px >= width || py >= height) {
|
||||||
// 边界外视为背景(白色)
|
// 边界外视为背景(黑色)
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
// 额外检查:确保不采样到字符右侧的残留区域
|
||||||
|
if (px >= charEndX) {
|
||||||
|
// 超出字符区域,视为背景
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
const idx = (py * width + px) * 4;
|
const idx = (py * width + px) * 4;
|
||||||
const R = pixelData[idx];
|
const R = pixelData[idx];
|
||||||
const G = pixelData[idx + 1];
|
const G = pixelData[idx + 1];
|
||||||
const B = pixelData[idx + 2];
|
const B = pixelData[idx + 2];
|
||||||
const A = pixelData[idx + 3] || 255;
|
const A = pixelData[idx + 3] || 255;
|
||||||
// 使用更严格的阈值,考虑alpha通道
|
// 计算亮度
|
||||||
const luminance = 0.299 * R + 0.587 * G + 0.114 * B;
|
const luminance = 0.299 * R + 0.587 * G + 0.114 * B;
|
||||||
const alpha = A / 255;
|
const alpha = A / 255;
|
||||||
// 只有深色且不透明才计入
|
// 背景是黑色,文字是白色,所以判断亮色(>=128)为文字点
|
||||||
if (luminance < 128 && alpha > 0.5) onCount++;
|
if (luminance >= 128 && alpha > 0.5) onCount++;
|
||||||
total++;
|
total++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 当深色占比超过阈值时判为1(至少需要采样到一些像素)
|
// 当亮色占比超过阈值时判为1(至少需要采样到一些像素)
|
||||||
target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0;
|
target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const lowBytes = new Array(charWidth).fill(0);
|
const lowBytes = new Array(charWidth).fill(0);
|
||||||
const highBytes = 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 col = 0; col < charWidth; col++) {
|
||||||
for (let row = 0; row < charHeight; row++) {
|
for (let row = 0; row < charHeight; row++) {
|
||||||
const pixel = target[row * charWidth + col];
|
const pixel = target[row * charWidth + col];
|
||||||
@ -149,7 +162,7 @@
|
|||||||
// 低字节:0-7行,从低位到高位
|
// 低字节:0-7行,从低位到高位
|
||||||
lowBytes[col] |= (1 << row);
|
lowBytes[col] |= (1 << row);
|
||||||
} else {
|
} else {
|
||||||
// 高字节:8-11行,从低位到高位
|
// 高字节:8-12行,从低位到高位(使用5位,剩余3位未使用)
|
||||||
highBytes[col] |= (1 << (row - 8));
|
highBytes[col] |= (1 << (row - 8));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -163,8 +176,9 @@
|
|||||||
let ctx = this.ctx;
|
let ctx = this.ctx;
|
||||||
|
|
||||||
// 1. 动态调整Canvas尺寸(高分辨率)
|
// 1. 动态调整Canvas尺寸(高分辨率)
|
||||||
|
// 设备端使用13x13点阵渲染
|
||||||
this.currentCanvasWidth = 13 * SCALE + PADDING_X;
|
this.currentCanvasWidth = 13 * SCALE + PADDING_X;
|
||||||
this.currentCanvasHeight = 12 * SCALE;
|
this.currentCanvasHeight = 13 * SCALE;
|
||||||
|
|
||||||
// 2. 清空Canvas(绘制背景)
|
// 2. 清空Canvas(绘制背景)
|
||||||
this.clearCanvas();
|
this.clearCanvas();
|
||||||
|
|||||||
@ -88,7 +88,7 @@
|
|||||||
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
|
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
|
||||||
<view class="clear"></view>
|
<view class="clear"></view>
|
||||||
<textToDotMatrixFor7305 class="TextToHex" ref="textToHex" :txts="formData.textLines"
|
<textToDotMatrixFor7305 class="TextToHex" ref="textToHex" :txts="formData.textLines"
|
||||||
:bgColor="'#FFFFFF'" :color="'#000000'" :fontSize="11" ></textToDotMatrixFor7305>
|
:bgColor="'#000000'" :color="'#FFFFFF'" :fontSize="11" ></textToDotMatrixFor7305>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="item">
|
<view class="item">
|
||||||
|
|||||||
Reference in New Issue
Block a user