uni-app 生成数字字母验证码

深碍√TFBOYSˉ_ 2022-11-19 04:26 271阅读 0赞

问题描述：在登录页经常有要求填写登录验证码，加强登录真实性。!\[效果图\](https://img-

![验证码效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]

使用canvas组件写出验证码

export default { 
    		data() { 
    			return { 
    				form：{ 
    					check:'',//验证码
    				},
    				width: 120,
    				height: 45,
    			};
    		},
    		onShow() { 
    			let that = this;
    			setTimeout(function() { 
    				that .initCode();
    			}, 500)
    		},
    		methods: { 
    			// 初始化验证码
    			initCode() { 
    				console.log('start');
    				var context = uni.createCanvasContext('imgcanvas', this),
    					w = this.width,
    					h = this.height;
    				context.setFillStyle("white");
    				context.setLineWidth(5);
    				context.fillRect(0, 0, w, h);
    				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q",
    						"R", "S",
    						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
    					],
    					str = '';
    				for (var i = 0; i < 4; i++) { 
    					var c = pool[this.rn(0, pool.length - 1)];
    					var deg = this.rn(-30, 30);
    					context.setFontSize(18);
    					context.setTextBaseline("top");
    					context.setFillStyle(this.rc(80, 150));
    					context.save();
    					context.translate(30 * i + 15, parseInt(h / 1.5));
    					context.rotate(deg * Math.PI / 180);
    					context.fillText(c, -15 + 5, -15);
    					context.restore();
    					str += c;
    				}
    				//生成的验证码在此写入缓存
    				console.log('验证码：', str);
    				uni.setStorage({ 
    					key: 'imgcode',
    					data: str,
    				});
    				for (var i = 0; i < 40; i++) { 
    					context.beginPath();
    					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
    					context.closePath();
    					context.setFillStyle(this.rc(150, 200));
    					context.fill();
    				}
    				context.draw();
    				console.log('end');
    			},
    			rc(min, max) { 
    				var r = this.rn(min, max);
    				var g = this.rn(min, max);
    				var b = this.rn(min, max);
    				return "rgb(" + r + "," + g + "," + b + ")";
    			},
    			rn(max, min) { 
    				return parseInt(Math.random() * (max - min)) + min;
    			},
    			
    			//点击验证码，切换
    			clickCode() { 
    				this.initCode();
    			},
    		}
    	}

对验证码进行校验

//toLowerCase()将字母转为小写
    	console.log('验证码',uni.getStorageSync('imgcode'));
    	if(this.form.check.toLowerCase()!=uni.getStorageSync('imgcode').toLowerCase()){ 
    		uni.showToast({ 
    			icon:'none',
    			title:'验证码错误',
    		})
    		return;
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]: /images/20221022/0ace1079c57542eaae82ece73c350528.png