使用node来做一个图片验证码

做一个下面的小案例，应该能够很快的理解。

在这里插入图片描述
首先我们需要创建一个项目。

使用express搭建一个简单的服务器。

安装express。

yarn add express

在app文件下这样配置。

const express = require('express')
const app = express()
app.use(express.static('public')) // 配置静态资源app.listen(80, () => {console.log('http://127.0.0.1')
})

下面安装svg-captcha第三方模块

yarn add svg-captcha

在app文件下配置

const express = require('express')
const svgCaptcha = require('svg-captcha')
const app = express()
app.get('/getInfo', (req, res) => {// 下面这行代码是随机生成验证码图片和文本并返回给客户端 const c = svgCaptcha.create({ size: 6, // 验证码长度ignoreChars: '0o1i', // 验证码字符中排除 0o1icolor: true, // 验证码是否有彩色noise: 1, //干扰线background: '#666' // 背景颜色})res.send(c)
})app.use(express.static('public'))
app.listen(80, () => {console.log('http://127.0.0.1')
})

上面的svgCaptcha.create(option),具体配置可在官方文档。这样基本就完成了，只需要使用ajax请求即可。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script></head><body><div id="box"></div><button id="btn">刷新</button><input type="text" id="ipt" /><span id="span"></span><script>const box = document.querySelector('#box')const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')const span = document.querySelector('#span')// 存放正确的验证码文本let validation = ''// 获取验证码图片和文本function getInfo() {$.get('http://127.0.0.1/getInfo', (res) => {// 正确验证码的信息 validation = res.text// res.data是一个验证码图片 svg标签box.innerHTML = res.data})}getInfo()btn.addEventListener('click', getInfo)ipt.addEventListener('blur', function (e) {if (this.value.toLowerCase() === validation.toLowerCase()) {span.innerHTML = '验证通过'span.style.color = 'green'} else {span.innerHTML = '验证不通过'span.style.color = 'red'}})</script></body>
</html>