1、安装
npm i svg-captcha --save
2、后端接口
const express = require('express')const router = express.Router()const bodyParser = require('body-parser') // 通过req.body获取post传值router.use(bodyParser.urlencoded({extended: false })) // 解析 application/x-www-form-urlencodedrouter.use(bodyParser.json()) // 解析 application/jsonconst svgCaptcha = require('svg-captcha')const cookieParser = require('cookie-parser')router.use(cookieParser())// res.cookie()设置cookie值, req.cookies获取cookie值// 获取图行验证码router.get('/captcha', (req, res) => {const captcha = svgCaptcha.create({inverse: false, // 翻转颜色fontSize: 48, // 字体大小noise: 2, // 干扰线条数width: req.query.width || 150, // 宽度height: req.query.height || 50, // 高度size: 4, // 验证码长度ignoreChars: '0o1i', // 验证码字符中排除 0o1icolor: true, // 验证码是否有彩色background: '#cc9966', // 验证码图片背景颜色})//保存到cookie,忽略大小写res.cookie('captcha', captcha.text.toLowerCase())res.type('svg')res.send(captcha.data)})// 登录校验验证码router.post('/login', (req, res) => {const {account, password, captcha } = req.bodyif (captcha.toLowerCase() !== req.cookies.captcha) {res.send({success: false, code: 0, msg: '验证码输入错误', data: null })return}})
3、前端
<template><div><img :src="captchaUrl" alt="" /></div></template><script>export default {data() {return {captchaUrl: '',}},mounted() {this.captchaUrl = `/pc/captcha?width=100&height=40&t=${new Date().getTime()}`},}</script>
如果觉得《nodejs生成图片验证码》对你有帮助，请点赞、收藏，并留下你的观点哦！
