https://github.com/produck/svg-captcha/blob/1.x/README_CN.md

安装

  1. cnpm install --save svg-captcha

使用

推荐在后端安装，后端生成，前端发送获取验证码请求时，发送给前端暂时。

后端生成

  1. //1、引入
  2.     const svgCaptcha = require('svg-captcha');
  4. //2、配置
  5.     const config = {
  6.       size: 4, // 验证码长度
  7.       ignoreChars: '0o1jpglayLq', // 验证码字符中排除哪些字符
  8.       noise: 1 ,// 干扰线条的数量
  9.       color: true, // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
  10.       // background: '#E7EAED', // 验证码图片背景颜色
  11.       width: 100, // 验证码宽度
  12.       height: 32, // 验证码高度
  13.       fontSize: 50, // 验证码字体大小
  14.       // charPreset: string, // 随机字符预设
  15.     }
  17. //3、根据配置生成
  18.     const c = svgCaptcha.create(config)
  20.     console.log(c) //{data: '<svg.../svg>', text: 'abcd'}
  22. //4、后端发送
  23.         //只要发c.data 即可，c.text储存起来，后面拿来和用户输入的对比
  24.         //建议用c.text.toLowerCase() 和 用户输入.toLowerCase() 处理下大小写，再对比

前端使用

  1. <template>
  2.     <span @click="getCaptchaPost" v-html="resCaptcha"></span>
  3. </template>
  4. //getCaptchaPost 为发送获取验证码请求的方法
  5. //resCaptcha 为请求返回的结果