图片验证码

最新推荐文章于 2024-09-13 14:34:15 发布

春风得逸

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量289

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lhy0728/article/details/123172656

版权

首先下载包：npm i svg-captcha -S

//后端代码
    const svgCaptcha = require('svg-captcha')       验证码的包

    async code() {   //验证码
        const { ctx } = this
        let captcha = svgCaptcha.create({
            size: 4, //验证码长度
            fontSize: 40, //验证码字号、大小
            noise: 2, //干扰线条数目
            color: true, //验证码字符是否有颜色 默认没有
            background: `#${Math.random().toString(16).slice(2, 8)}`,//随即背景色可以不写
            height: 33
        })
        ctx.session.code = captcha.text        将验证码存在ctx.session中
        ctx.body = {
            data: captcha.data,
            ...message('更新成功', 200)
        }
    }



//前端

 let text=''     // 用来接收验证码图片文本。 
 <span dangerouslySetInnerHTML={{ __html:text }}></span>        //这是在React中的用法
  <div v-html={text}></div>        //VUE中的用法