纯前端实现图片验证码

前言

之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的，想了下，前端其实可以直接canvas实现，减轻服务器压力。

实现

子组件，允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调用(需要利用ref实现)，点击验证码也可手动刷新。

//VerifyCodeImg.vue
<!--验证码生成-->
<template><canvas id="canvasDom" :width="props.canvasWidth" :height="props.canvasHeight" @click="drawPic"></canvas>
</template><script setup>
import { onMounted, onBeforeUnmount, computed } from 'vue';
let props = defineProps({canvasWidth: { // 容器宽度type: Number,default: 100},canvasHeight: { // 容器高度type: Number,default: 40},refreshTime: {//验证码刷新间隔时间type: Number,default: 60}
}),emits = defineEmits(['getVerifyCodeStr']),verifyCodeTimeId = null,//定时器idrandomStr = '0123456789abcdefghijklmnopqrstuvwxyz',// 所有随机字符串trueRefreshTime = computed(() => {return props.refreshTime * 1000;}),verifyCodeStr = '';//验证码字符串onMounted(() => {initVerifyCodeImg();
});// 初始化
const initVerifyCodeImg = () => {drawPic();verifyCodeTimeId = setInterval(() => {drawPic();}, trueRefreshTime.value);
};// 绘制验证码图片
const drawPic = () => {randomCode();let canvas = document.getElementById('canvasDom')let ctx = canvas.getContext('2d')ctx.textBaseline = 'bottom'// 绘制背景ctx.fillStyle = '#e6ecfd'ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight)// 绘制文字for (let i = 0; i < verifyCodeStr.length; i++) {drawText(ctx, verifyCodeStr[i], i)}drawLine(ctx)drawDot(ctx)
};//4个随机字符
const randomCode = () => {verifyCodeStr = ''for (let i = 0; i < 4; i++) {let txt = randomStr[randomNum(0, randomStr.length)];verifyCodeStr += txt;}emits('getVerifyCodeStr', verifyCodeStr);
};// 随机数
const randomNum = (min, max) => {return Math.floor(Math.random() * (max - min) + min)
};// 随机色
const randomColor = (min, max) => {let r = randomNum(min, max)let g = randomNum(min, max)let b = randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'
};// 绘制文字
const drawText = (ctx, txt, i) => {let fontSizeMin = 30,// 字体最小值fontSizeMax = 40;// 字体最大值ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色ctx.font = randomNum(fontSizeMin, fontSizeMax) + 'px SimHei' // 随机生成字体大小let x = (i + 1) * (props.canvasWidth / (verifyCodeStr.length + 1))let y = randomNum(fontSizeMax, props.canvasHeight - 5)var deg = randomNum(-30, 30)// 修改坐标原点和旋转角度ctx.translate(x, y)ctx.rotate(deg * Math.PI / 180)ctx.fillText(txt, 0, 0)// 恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180)ctx.translate(-x, -y)
};// 绘制干扰线
const drawLine = (ctx) => {for (let i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(100, 200)ctx.beginPath()ctx.moveTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))ctx.lineTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))ctx.stroke()}
};// 绘制干扰点
const drawDot = (ctx) => {// 绘制干扰点for (let i = 0; i < 30; i++) {ctx.fillStyle = randomColor(0, 255)ctx.beginPath()ctx.arc(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight), 1, 0, 2 * Math.PI)ctx.fill()}
};//暴露绘制图片方法供父组件使用
defineExpose({drawPic
});onBeforeUnmount(() => {clearInterval(verifyCodeTimeId);//页面销毁前，需要清除定时器
});</script><style scoped lang='scss'>
#canvasDom {cursor: pointer;
}
</style>

父组件使用。

<VerifyCodeImg :refreshTime="1" ref="verifyCodeImgRef" @getVerifyCodeStr="getVerifyCodeStr" />

结语

上面是vue3的实现，你也可以改写为vue2的。
原文链接：https://xiblogs.top/?id=63