- A+
所属分类：Web前端
前言
之前业务系统中验证码一直是由后端返回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,//定时器id randomStr = '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
