优化取模组件,取模效果更好

components/TextToHex/TextToHexV1.vue

@@ -60,7 +60,7 @@
 			 * 清除Canvas内容
 			 */
 			clearCanvas() {
-				this.ctx.setFillStyle(this.bgColor);
+				this.ctx.setFillStyle('#FFFFFF'); //this.bgColor
 				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 			},
 
@@ -71,22 +71,22 @@
 				if (this.canvasWarmed) {
 					return;
 				}
-				
+
 				try {
 					// 设置画布尺寸
 					this.currentCanvasWidth = 16;
 					this.currentCanvasHeight = 16;
-					
+
 					// 清空画布
 					this.clearCanvas();
-					
+
 					// 绘制一个测试字符来预热字体和画布
-					this.ctx.setFillStyle(this.color);
+					this.ctx.setFillStyle('#000000'); //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, () => {
@@ -110,7 +110,7 @@
 							}, 100);
 						});
 					});
-					
+
 					// 额外等待确保字体完全加载
 					await new Promise(resolve => setTimeout(resolve, 200));
 				} catch (ex) {
@@ -118,55 +118,55 @@
 					this.canvasWarmed = true; // 即使失败也标记为已预热，避免重复尝试
 				}
 			},
-			
+
 			/**
 			 * 复用单个Canvas处理所有文本行
 			 */
 			async drawAndGetPixels() {
 				// 第一次调用时先预热画布（解决APP重新打开后第一次获取数据不完整的问题）
 				// await this.warmupCanvas();
-				
-				let convertCharToMatrix=function(imageData) {
-					debugger;
+				let convertCharToMatrix = function(imageData) {
+					
 					// console.log("imgData=",imageData)
 					let matrix = [];
-
+				
 					// 逐行处理
 					for (let y = 0; y < 16; y++) {
-						let byte1 = 0,
-							byte2 = 0;
-
-						// 每行16个像素，分为两个字节
+						let byte1 = '',
+							byte2 = '';
+				
+				
 						for (let x = 0; x < 16; x++) {
-							// 计算像素在imageData中的索引 (RGBA格式)
+				
 							let index = (y * 16 + x) * 4;
-							let red = imageData[index];
-
-							// 黑色像素（R值较低）视为1，白色视为0
-							let isBlack = red < 128;
-
-							if (x < 8) {
-								// 第一个字节（左8位）
-								if (isBlack) {
-									byte1 |= 0x80 >> x; // 从左到右设置位
-								}
-							} else {
-								// 第二个字节（右8位）
-								if (isBlack) {
-									byte2 |= 0x80 >> (x - 8);
-								}
+							let r = imageData[index];
+							let g = imageData[index+1];
+							let b = imageData[index+2];
+					
+					
+							let gray = (r + g + b) / 3;
+					        let bit = gray < 255 ? '1' : '0';
+										
+							
+							
+							if (x < 8) {				
+								byte1+=bit;
+							} else {				
+								byte2+=bit;
 							}
 						}
-
+						byte1=parseInt(byte1,2);
+						byte2=parseInt(byte2,2);
 						// 将字节转换为两位十六进制字符串
 						matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
 						matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
 					}
-
+				
 					return matrix;
 				}
+			
 
-				let  drawTxt=async (textLine)=> {
+				let drawTxt = async (textLine) => {
 					debugger;
 					let result = {};
 					let ctx = this.ctx;
@@ -179,12 +179,12 @@
 					this.clearCanvas();
 
 					// 3. 设置文字样式
-					ctx.setFillStyle(this.color);
+					ctx.setFillStyle('#000000'); //this.color
 					ctx.setTextBaseline('middle');
 					// ctx.setTextAlign('center')
 					ctx.setFontSize(this.fontSize);
-					ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
-					
+					ctx.font = `${this.fontSize}px  "PingFang SC","PingFangBold", Arial, sans-serif`;
+
 					// 4. 绘制当前行文本
 					let currentX = 0;
 					let currentY = this.fontSize / 2;
@@ -206,8 +206,8 @@
 								width: this.currentCanvasWidth,
 								height: this.currentCanvasHeight,
 								success: res => {
-									
-									result={
+
+									result = {
 										line: textLine,
 										pixelData: res.data,
 										width: this.currentCanvasWidth,
@@ -228,10 +228,10 @@
 				let arr = [];
 				// 循环处理每行文本
 				for (let i = 0; i < this.validTxts.length; i++) {
-debugger;
+					debugger;
 					let linePixls = [];
 					let item = this.validTxts[i];
-				
+
 					for (var j = 0; j < item.length; j++) {
 						let result = await drawTxt(item[j]);
 						linePixls.push(convertCharToMatrix(result.pixelData));
@@ -239,7 +239,7 @@ debugger;
 					// console.log("hexs=",linePixls.join(","));
 					arr.push(linePixls);
 				}
-				
+
 				return arr;
 			}
 		}