验证码图片显示

有一个npm的轮子svg-captcha，用于生成svg格式的验证码图片，非常好用，用过的都知道，没用过你值得尝试下。
我们知道svg的图片可以在html里直接显示。这样，后端随机生成一串字符串，和对应的svg代码，把svg代码发送给前端，前端拿到后，把该svg替换到页面中div元素的innerHTML，即可在该div的位置显示svg图片。用户输入识别出来的验证码字符串，提交到后端，后端根据生成时记录的验证码字符串核验用户提交的验证码字符串。。。
下面我们主要把后端验证码生成和前端验证码显示的代码示例下：

//后端nodejs+express
const svgCaptcha = require('svg-captcha')

const express = require('express');
const app = express();

app.use('/', express.static('.')); //目录下有html和其他js文件比如axios.min.js
app.get('/getsvg',  (req, res) => {
	let captcha = svgCaptcha.create({
		size: 5, 
		ignoreChars: '0o1i', // 验证码字符中排除 0o1i，这几个看起来容易混淆
		fontSize: 32, 
		noise: 2, 
		width: 180, 
		height: 36, 
		color: true, 
		background: '#ccc' 
		})
	console.log( captcha.text);//验证码字符串
	res.type('svg');
	res.send(captcha.data);//返回前端的svg代码
})

var server=app.listen(9210,function(){
	console.log("app启动");
})

<!--testcaptcha.html-->
<script src="axios.min.js"></script>
<div onclick="getvc()" id="vcp"></div>
<script>
function getvc() {axios.get("/getsvg").then((res) => vcp.innerHTML=res.data )} //点击图片更新验证码
getvc()   //页面加载即显示验证码
</script>