建设银行流水账网站查询,云开发工程师,门店设计方案,绿派网站建设前言 之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的#xff0c;想了下#xff0c;前端其实可以直接canvas实现#xff0c;减轻服务器压力。 实现 子组件#xff0c;允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)…前言 之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的想了下前端其实可以直接canvas实现减轻服务器压力。 实现 子组件允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调用(需要利用ref实现)点击验证码也可手动刷新。 //VerifyCodeImg.vue !--验证码生成-- templatecanvas idcanvasDom :widthprops.canvasWidth :heightprops.canvasHeight clickdrawPic/canvas /templatescript 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 #e6ecfdctx.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);//页面销毁前需要清除定时器 });/scriptstyle scoped langscss #canvasDom {cursor: pointer; } /style父组件使用。 VerifyCodeImg :refreshTime1 refverifyCodeImgRef getVerifyCodeStrgetVerifyCodeStr /结语 上面是vue3的实现你也可以改写为vue2的。 原文链接https://xiblogs.top/?id63