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

components/TextToHex/textToDotMatrix.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);
 			},
 
@@ -100,10 +100,19 @@
 						for (let x = 0; x < 16; x++) {
 							// 计算像素在imageData中的索引 (RGBA格式)
 							let index = (y * 16 + x) * 4;
-							let red = imageData[index];
+							// let red = imageData[index];
 
+
+							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';
+							
 							// 黑色像素（R值较低）视为1，白色视为0
-							let isBlack = red < 128 ? 1 : 0;
+							let isBlack =gray < 255 ? 1 : 0;// red < 128 ? 1 : 0;
 							arr.push(isBlack);
 
 						}
@@ -154,7 +163,7 @@
 					this.clearCanvas();
 
 					// 3. 设置文字样式
-					ctx.setFillStyle(this.color);
+					ctx.setFillStyle('#000000');//this.color
 					ctx.setTextBaseline('middle');
 					// ctx.setTextAlign('center')
 					ctx.setFontSize(this.fontSize);