1
0
forked from dyf/APP

继续优化7305

This commit is contained in:
微微一笑
2025-11-05 19:18:05 +08:00
parent 9037ef6ac3
commit 27d212e7dc
2 changed files with 2042 additions and 1898 deletions

View File

@ -27,6 +27,16 @@
color: {
type: String,
default: "#000000"
},
// 二值化阈值0~1越大越细默认偏清晰
threshold: {
type: Number,
default: 0.45
},
// 是否启用轻度笔画修复3x3 膨胀);默认关闭以避免变粗
sharpen: {
type: Boolean,
default: false
}
},
data() {
@ -48,6 +58,16 @@
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宽度
*/
@ -69,6 +89,8 @@
* 复用单个Canvas处理所有文本行
*/
async drawAndGetPixels() {
// 发送前:确保画布处于干净背景态
await this.resetCanvas();
// 超采样比例(提高分辨率再降采样,减少模糊)
const SCALE = 3;
const PADDING_X = 1 * SCALE; // 左侧预留像素,避免首字裁剪
@ -96,21 +118,28 @@
}
let convertCharToMatrix = (drawResult, item) => {
// 设备端使用13x13点阵渲染
// 设备端使用13x13点阵渲染保持输出13列×13行但只在内部采样12×12保留右侧与底部1像素缓冲
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 = 0.5; // 每个小块中超过50%亮色文字判为1
const threshold = Math.max(0.2, Math.min(0.8, this.threshold || 0.45));
// 确保采样区域严格对齐从PADDING_X开始只采样13列
// 字符实际绘制区域从PADDING_X开始宽度为13*SCALE
// 确保采样区域严格对齐从PADDING_X开始只采样12列右侧预留1px12行底部预留1px
// 字符实际绘制区域从PADDING_X开始宽度为12*SCALE
const charStartX = PADDING_X;
const charEndX = PADDING_X + charWidth * SCALE;
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
@ -151,6 +180,32 @@
}
}
// 轻度笔画修复:可选 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 lowBytes = new Array(charWidth).fill(0);
const highBytes = new Array(charWidth).fill(0);
// 按列打包每列13行分成上下两字节低字节0-7行8行高字节8-12行5行
@ -198,30 +253,41 @@
ctx.fillText(textLine, charX, charY);
// 5. 异步绘制并获取像素数据(串行处理避免冲突)
await new Promise((resolve, reject) => {
ctx.draw(false, () => {
uni.canvasGetImageData({
canvasId: 'reusableCanvas',
x: 0,
y: 0,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight,
success: res => {
result = {
line: textLine,
pixelData: res.data,
const grabPixels = () => new Promise((resolve, reject) => {
// 立即绘制并给一点缓冲时间,避免取像素过早
ctx.draw(true, () => {
setTimeout(() => {
uni.canvasGetImageData({
canvasId: 'reusableCanvas',
x: 0,
y: 0,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
};
resolve();
},
fail: err => {
// console.error(`处理第${i+1}行失败:`, err);
reject(err)
}
});
height: this.currentCanvasHeight,
success: res => {
result = {
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
};
resolve();
},
fail: err => reject(err)
});
}, 70);
});
});
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;
}
@ -239,11 +305,17 @@
// 调试:打印每个字符的点阵数据
console.log(`[点阵生成] 字符"${char}" 点阵数据:`, matrix.map(b => '0x' + b.toString(16).padStart(2, '0')).join(' '));
linePixls.push(matrix);
// 在字符间增加轻微延时,避免相邻提取竞争(尤其是末字符)
await new Promise(r => setTimeout(r, 20));
}
// console.log("hexs=", linePixls.join(","));
arr.push(linePixls);
// 每行结束再等一会,提高末字符稳定性
await new Promise(r => setTimeout(r, 40));
}
// 发送后:再次清空画布,避免残留影响下一次
await this.resetCanvas();
return arr;
}
}

File diff suppressed because it is too large Load Diff