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

components/TextToHex/textToDotMatrixV1.vue

@@ -59,7 +59,7 @@
 			 * 清除Canvas内容
 			 */
 			clearCanvas() {
-				this.ctx.setFillStyle(this.bgColor);
+				this.ctx.setFillStyle('#FFFFFF');//this.bgColor
 				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 			},
 
@@ -105,10 +105,18 @@
 							let G = imageData[index+1];
 							let B = imageData[index]+2;
 							
+							// let r = imageData[i];
+							// let g = imageData[i+1];
+							// let b = imageData[i+2];
+							
+							
+							let gray = (R + G + B) / 3;
+							let bit = gray < 255 ? 1 : 0;
+							
 							
 							// 黑色像素（R值较低）视为1，白色视为0
-							let isBlack = R < 128 ? 1 : 0;
-							arr.push(isBlack);
+							// let isBlack = R < 128 ? 1 : 0;
+							arr.push(bit);
 
 						}
 					}
@@ -159,11 +167,11 @@
 					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 PingFangBold", "PingFang SC", Arial, sans-serif`;
 
 					// 4. 绘制当前行文本
 					let currentX = 0;