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

components/TextToHex/TextToHex.vue

@@ -58,7 +58,7 @@
 			 * 清除Canvas内容
 			 */
 			clearCanvas() {
-				this.ctx.setFillStyle(this.bgColor);
+				this.ctx.setFillStyle('#FFFFFF');//this.bgColor
 				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 			},
 
@@ -73,31 +73,49 @@
 
 					// 逐行处理
 					for (let y = 0; y < 16; y++) {
-						let byte1 = 0,
-							byte2 = 0;
+						let byte1 = '',
+							byte2 = '';
 
 						// 每行16个像素，分为两个字节
 						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 index = (y * 16 + x) * 4;
+							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;
 							}
-						}
+							// 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);
+							// 	}
+							// }
+						}
+						
+						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());
@@ -118,7 +136,7 @@
 					this.clearCanvas();
 
 					// 3. 设置文字样式
-					ctx.setFillStyle(this.color);
+					ctx.setFillStyle('#000000');//this.color
 					ctx.setTextBaseline('middle');
 					ctx.setFontSize(this.fontSize);
 					ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;