添加102联机记录
This commit is contained in:
liub
291
components/TextToHex/TextToHexV2.vue
Normal file
291
components/TextToHex/TextToHexV2.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view>
|
||||
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
|
||||
class="offscreen-canvas"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextToHexV2",
|
||||
props: {
|
||||
txts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
validator: (value) => value.every(item => typeof item === 'string')
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 12,
|
||||
validator: (value) => value > 0 && value <= 100
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
currentCanvasWidth: {
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
currentCanvasHeight: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
returnType: { //返回值的进制，默认16进制
|
||||
type: Number,
|
||||
default: 16
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
// Canvas上下文（复用）
|
||||
ctx: null,
|
||||
// 标记是否已经预热过画布
|
||||
canvasWarmed: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
validTxts() {
|
||||
return this.txts.filter(line => line.trim() !== '');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化Canvas上下文（只创建一次）
|
||||
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 估算单行文本所需的Canvas宽度
|
||||
*/
|
||||
calcLineWidth(textLine) {
|
||||
return textLine.length * 16;
|
||||
},
|
||||
|
||||
/**
|
||||
* 清除Canvas内容
|
||||
*/
|
||||
clearCanvas() {
|
||||
this.ctx.setFillStyle(this.bgColor);
|
||||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||
},
|
||||
|
||||
/**
|
||||
* 预热画布，确保画布和字体完全准备好（解决APP重新打开后第一次获取数据不完整的问题）
|
||||
*/
|
||||
async warmupCanvas() {
|
||||
if (this.canvasWarmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 清空画布
|
||||
this.clearCanvas();
|
||||
|
||||
// 绘制一个测试字符来预热字体和画布
|
||||
this.ctx.setFillStyle(this.color);
|
||||
this.ctx.setFontSize(this.fontSize);
|
||||
this.ctx.font = `${this.fontSize}px "PingFangBold","PingFang SC", Arial, sans-serif`;
|
||||
this.ctx.setTextBaseline('middle');
|
||||
this.ctx.fillText('测', 0, 8);
|
||||
|
||||
// 等待画布绘制完成
|
||||
await new Promise((resolve) => {
|
||||
this.ctx.draw(false, () => {
|
||||
// 获取一次测试数据，确保canvasGetImageData API已准备好
|
||||
setTimeout(() => {
|
||||
uni.canvasGetImageData({
|
||||
canvasId: 'reusableCanvas',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 16,
|
||||
height: 16,
|
||||
success: () => {
|
||||
this.canvasWarmed = true;
|
||||
resolve();
|
||||
},
|
||||
fail: () => {
|
||||
this.canvasWarmed = true;
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
// 额外等待确保字体完全加载
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
} catch (ex) {
|
||||
console.log("画布预热异常:", ex);
|
||||
this.canvasWarmed = true; // 即使失败也标记为已预热，避免重复尝试
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 复用单个Canvas处理所有文本行
|
||||
*/
|
||||
async drawAndGetPixels() {
|
||||
// 第一次调用时先预热画布（解决APP重新打开后第一次获取数据不完整的问题）
|
||||
await this.warmupCanvas();
|
||||
|
||||
let convertCharToMatrix = (imageData) => {
|
||||
|
||||
try {
|
||||
// console.log("imgData=",imageData.length)
|
||||
let matrix = [];
|
||||
let k = 0;
|
||||
let tmpArr = [];
|
||||
while (k < imageData.length) {
|
||||
|
||||
let r = imageData[k];
|
||||
let g = imageData[k + 1];
|
||||
let b = imageData[k + 2];
|
||||
let a = imageData[k + 3];
|
||||
|
||||
|
||||
// if (r === 255 && a >= 0) {
|
||||
// r = 255;
|
||||
// } else {
|
||||
// r = 0;
|
||||
// }
|
||||
|
||||
|
||||
// if (r === 255) {
|
||||
// tmpArr.push(1);
|
||||
// } else {
|
||||
// tmpArr.push(0);
|
||||
// }
|
||||
|
||||
|
||||
// 黑色像素（R值较低）视为1，白色视为0
|
||||
let isBlack = r < 128;
|
||||
|
||||
let byte1 = 0;
|
||||
|
||||
if (isBlack) {
|
||||
byte1 = 1; // 从左到右设置位
|
||||
}
|
||||
|
||||
tmpArr.push(byte1);
|
||||
|
||||
if (tmpArr.length == 8) {
|
||||
tmpArr = parseInt(tmpArr.join(''), 2);
|
||||
|
||||
if (this.returnType == 16) {
|
||||
matrix.push('0x' + tmpArr.toString(16).padStart(2, '0').toUpperCase());
|
||||
|
||||
} else if (this.returnType == 10) {
|
||||
matrix.push(tmpArr);
|
||||
|
||||
}
|
||||
if (this.returnType == 2) {
|
||||
matrix.push(tmpArr.toString(2).padStart(8, '0'));
|
||||
}
|
||||
|
||||
tmpArr = [];
|
||||
}
|
||||
|
||||
k += 4;
|
||||
}
|
||||
|
||||
// console.log("matrix=",matrix);
|
||||
|
||||
return matrix;
|
||||
} catch (ex) {
|
||||
console.error("ex=", ex);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let drawTxt = async (textLine) => {
|
||||
let result = {};
|
||||
let ctx = this.ctx;
|
||||
|
||||
|
||||
|
||||
|
||||
// 2. 清空Canvas（绘制背景）
|
||||
this.clearCanvas();
|
||||
|
||||
// 3. 设置文字样式
|
||||
ctx.setFillStyle(this.color);
|
||||
ctx.setTextBaseline('middle');
|
||||
// ctx.setTextAlign('center')
|
||||
ctx.setFontSize(this.fontSize);
|
||||
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
|
||||
|
||||
// 4. 绘制当前行文本
|
||||
let currentX = 0;
|
||||
let currentY = this.fontSize / 2;
|
||||
console.log("textLine=", textLine)
|
||||
ctx.fillText(textLine, currentX, currentY);
|
||||
// for (let j = 0; j < textLine.length; j++) {
|
||||
// let char = textLine[j];
|
||||
// ctx.fillText(char, currentX, currentY);
|
||||
// // 按实际字符宽度计算间距
|
||||
// let charWidth = ctx.measureText(char).width;
|
||||
// currentX += charWidth;
|
||||
// }
|
||||
|
||||
// 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,
|
||||
width: this.currentCanvasWidth,
|
||||
height: this.currentCanvasHeight
|
||||
};
|
||||
resolve();
|
||||
},
|
||||
fail: err => {
|
||||
console.error(`处理第${i+1}行失败:`, err);
|
||||
reject(err)
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
let arr = [];
|
||||
// 循环处理每行文本
|
||||
for (let i = 0; i < this.validTxts.length; i++) {
|
||||
|
||||
let linePixls = [];
|
||||
let item = this.validTxts[i];
|
||||
|
||||
console.log("item=", item);
|
||||
let result = await drawTxt(item);
|
||||
linePixls.push(convertCharToMatrix(result.pixelData));
|
||||
|
||||
|
||||
arr.push(linePixls);
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.offscreen-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user