验证码----svg-captcha

首先找或者新建一个空文件夹,下面是我新建的空文件夹

然后npm验证码svg-captcha模块

npm i --save svg-captcha

相信各位都知道一个node项目还要继续引入什么模块吧,可能有刚刚接触nodejs的小伙伴,我还是将需要引入什么模块展示到下面吧

npm i express
npm i body-parser

然后再yanzhengma目录下新建一个public文件夹,用来存放静态资源,然后在public文件夹下新建一个captcha.html文件,下面是我的目录结构

这里就不多说了,直接上代码

app.js

// 加载express模块
const express = require("express")
// 加载bodyParser模块
const bodyParser = require("body-parser")
// API网址:https://github.com/produck/svg-captcha/blob/1.x/README_CN.md
// 加载图片验证码模块
const svgCaptcha = require("svg-captcha")
// 创建服务器对象
const server = express()
server.use(bodyParser.urlencoded({extended: false,})
)
//静态资源管理
server.use(express.static("public"))// 图片验证码接口
server.get("/captcha", (req, res) => {// 设置字母随机验证码相关属性let options = {size: 4, // 4个字母noise: 2, // 干扰线2条color: true, // 文字颜色background: "#666", // 背景颜色// 数字的时候，设置下面属性。最大，最小，加或者减// mathMin: 1,// mathMax: 30,// mathOperator: "+",}//这里可以分为字母和数字随机验证码和数字算数随机验证码,//我就先展示字母和数字随机验证码了,//如果想尝试数字算数随机验证码可以将下一行取消注释,将数字算数验证码解开注释即可let captcha = svgCaptcha.create(options) //字母和数字随机验证码// let captcha = svgCaptcha.createMathExpr(options) //数字算数随机验证码let { text, data } = captcha// console.log(text,data);// text是指产生的验证码，data指svg的字节流信息res.type("svg")res.send({ img: captcha.data, str: captcha.text })
})// 指定服务器对象监听的端口
server.listen(3000, () => {console.log("服务器启动成功...")
})

public/captcha.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>图片验证码</title></head><body><div><div onclick="refresh()" id="aaa">验证码占位区</div></div><div>点击刷新</div><!-- 引入axiosjs文件,用来发起请求,我这里是直接引入的在线的axios文件,当然大家可以去网上下载axios文件,直接放到public文件夹里面再引入--><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- <script src="./axios.js"></script> --><script>// 刷新方法function refresh() {// 发送请求this.axios.get("/captcha").then((res) => {console.log(res)let svg = res.data.imglet str = res.data.strsvg = `<div>${svg}</div>`aaa.innerHTML = svg})}refresh()</script></body>
</html>

然后运行app.js

node app.js

接着浏览器访问后网页效果如下图

开发者模式控制台打印出来的数据如图

下面是数字算数随机验证码的效果和开发者模式控制台打印的数据图

这里我们可以看到,我这里出来的是"2+5",然后其计算结果为7,开发者模式控制台打印的数据下的"data.str"为"7"

感谢您能够认真看完我的文章

验证码----svg-captcha相关推荐

Laravel-5.1验证码mews captcha
Laravel-5.1 ---- 将mews captcha整合到项目中! 经过摸索,终于能在laravel 5.1中应用验证码了. 因为英语渣五水平,所以几乎没搜索到什么有用的,于是考虑在githu ...
Pythonseleniumtesseract自动化测试随机码、验证码（Captcha）的OCR识别解决方案参考
Python&selenium&tesseract自动化测试随机码.验证码(Captcha)的OCR识别解决方案参考参考文章: (1)Python&selenium& ...
机器学习案例：验证码识别(Captcha)
验证码(CAPTCHA,全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人工智能的全自动程序. 实验步骤: 1.创建验证码 2.对验证码进行01值化 3.降噪 4.对验证码进行切分 ...
验证码（CAPTCHA）杂谈
验证码(CAPTCHA)是Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类 ...
验证码（Captcha）的两种校对机制
文章目录前言两种验证机制状态验证码无状态验证码前言 Captcha,中文全称为全自动区分计算机和人类的图灵测试,在实际使用中常常以验证码的形式出现在人们的视野中,即通过展示一张图片,要求用户 ...
“ 验证码（CAPTCHA）“的演变史
验证码作为人机交互界面经常出现的关键要素,是身份核验.风险防范的重要部件,也是用户交互体验的第一关口,广泛应用在视频.教育.金融.电商.航旅.互联网.公共服务等行业的网站和App上. 验证码的全名是& ...
15分钟实战机器学习：验证码（CAPTCHA）识别
让我们使用机器学习(machine learning)来绕过世界上最流行的Wordpress验证码插件! 每个人都不喜欢验证码(CAPTCHA) - 那些令人讨厌的图像中包含了你必须正确输入的文本,只 ...
Pythonseleniumtesseract自动化测试随机码、验证码（Captcha）的OCR识别解决方案参考...
在自动化测试或者安全渗透测试中,Captcha验证码的问题经常困扰我们,还好现在OCR和AI逐渐发展起来,在这块解决上越来越支撑到位. 我推荐的几种方式,一种是对于简单的验证码,用开源的一些OCR图片 ...
（翻译）验证码（Captcha）
问题概述应用系统需要判断输入的数据来自真实的人而不是计算机程序. 示例用途网站,其特点是能让游客进行评论.注册成为用户或积极发表言论,但网站常被恶意程序攻击(PS:原文是spam-rob ...
验证码（CAPTCHA）
全自动区分计算机和人类的图灵测试(英语:Completely Automated Public Turing test to tell Computers and Humans Apart,简称CAP ...

验证码----svg-captcha

验证码----svg-captcha

app.js

public/captcha.html

验证码----svg-captcha相关推荐

最新文章

热门文章