前端添加svg-captcha的用法

1.首先在控制台下载svg-capthca,安装方式1
npm install --save svg-captcha
2.配置svg-captcha,需要注意是svgCaptcha.create({}),不是svgCaptcha({})
router.get('/code', async (ctx) => {
    const captcha = svgCaptcha.create({
        size: 4, //验证码长度
        fontSize: 45, //验证码字号
        noise: 1, //干扰线条数目
        width: 120, //宽度
        height: 36, //高度
        color: true, //验证码字符是否有颜色,默认是没有,但是如果设置了背景颜色,那么默认就是有字符颜色
        background: '#ccc' //beijing
    })

    ctx.session.code = captcha.text
    ctx.response.type = 'image/svg+xml'
    ctx.body = captcha.data
})
3.前端使用
<div class="layui-input-block">
                        <input class="captchaInp" type="text" name="">
                        <img src="{{_HOST_}}/admin/login/code" alt="看不清?点击刷新" class="captchaPic"
                            onclick="javascript:this.src='{{_HOST_}}/admin/login/code?mt='+Math.random()">
 </div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。