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>