使用Vue封装canvas图形验证码

代码展示

<template>
	<canvas ref="canvas"></canvas>
</template>

<script>
	export default {
		data(){
			return {
				Code:""	//验证码
			}
		},
		mounted(){
			this.Code = this.createCaptcha(); // 赋值一下验证码
		},
		methods: {
			generateCaptcha() { // 随机生成 4为数的验证码
			  let captcha = '';
			  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			  for (let i = 0; i < 4; i++) {
			    captcha += characters.charAt(Math.floor(Math.random() * characters.length));
			  }
			  return captcha;
			},
			createCaptcha() { // 生成图形验证码
			  const canvas = this.$refs.canvas
			  const context = canvas.getContext('2d');
			  const captcha = this.generateCaptcha();
			 
			  // 设置画布样式
			  context.fillStyle = '#f5f5f5';
			  context.fillRect(0, 0, canvas.width, canvas.height);
			  context.font = 'bold 24px Arial';
			  context.fillStyle = '#333';
			  context.textAlign = 'center';
			  context.textBaseline = 'middle';
			 
			  // 绘制验证码文本
			  context.fillText(captcha, canvas.width / 2, canvas.height / 2);
			 
			  // 绘制干扰线
			  for (let i = 0; i < 6; i++) {
			    context.strokeStyle = this.getRandomColor();
			    context.beginPath();
			    context.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
			    context.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
			    context.stroke();
			  }
			  // 返回生成的验证码
			  return captcha;
			},
			getRandomColor() { // 获取随机颜色
			  const letters = '0123456789ABCDEF';
			  let color = '#';
			  for (let i = 0; i < 6; i++) {
			    color += letters[Math.floor(Math.random() * 16)];
			  }
			  return color;
			}
		}
	}
</script>

<style>
</style>