node ,express使用插件svg-captcha生成svg图片验证码 ，以及前端的显示

npm install --save svg-captcha

1.安装 svg-captcha  （文档传送门）

2.引入svg验证码

var svgCaptcha = require('svg-captcha');

 3.生成svg-capcha二维码

 

let randomcode = "" //真实验证码

 

exports.getCode = (req, res) => {

    const captcha = svgCaptcha.create({//下面是对二维码生成的设置

        fontSize: 50,

        width: 100,

        height: 40,

        noise:2,//干扰线

        // background:'#cc9966'

    });

    // res.setHeader('Content-Type', 'image/svg+xml');

    res.json({

        'imgData': String(captcha.data)//生成的二维码svg图片

    });

    res.end();

    randomcode = captcha.text.toLowerCase() //这是生成的四位二维码（）

    // console.log(captcha.text.toLowerCase())

    // console.log(randomcode)

}

4.前端显示  

》 调用上面的接口（3）获取到的svg格式图片  ：

》前端 使用该图片 ：

1）.直接把这些代码（svg标签里面所有的内容） 放到html中可以正常显示二维码

2）.我前端使用的是vue ， 那么

<div v-html="verification.imgValue" @click="getData()"></div>