Node.JS用纯JavaScript生成图片或滑块式验证码功能


Posted in Javascript onSeptember 12, 2019

有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片。跨平台部署不是很方便。这里介绍几个用纯JS实现的图片验证码生成模块。

captchapng

用纯JavaScript实现的验证码生成模块。

https://github.com/GeorgeChan/captchapng

安装简单,依赖少:

npm install captchapng

示例:

var captchapng = require('captchapng');
app.get('/sign/captcha.png', function(req, res) {
var captchaNumber  = parseInt(Math.random() * 9000 + 1000)
req.session.captcha = captchaNumber
var p = new captchapng(80,20, captchaNumber); // width,height,numeric captcha
p.color(0, 0, 0, 0); // First color: background (red, green, blue, alpha)
p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)
var img = p.getBase64();
var imgbase64 = new Buffer(img,'base64');
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(imgbase64);
})

Express + Captcha

为Express框架设计的验证码生成模块。

https://github.com/napa3um/node-captcha

安装&示例:

$ npm install captcha
Usage (for Express 4)
'use strict'
const express = require('express')
const session = require('express-session')
const bodyParser = require('body-parser')
const captchaUrl = '/captcha.jpg'
const captchaId = 'captcha'
const captchaFieldName = 'captcha'
const captcha = require('./captcha').create({ cookie: captchaId })
const app = express()
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
}))
app.use(bodyParser.urlencoded({ extended: false }))
app.get(captchaUrl, captcha.image())
app.get('/', (req, res) => {
res.type('html')
res.end(`
<img src="${ captchaUrl }"/>
<form action="/login" method="post">
<input type="text" name="${ captchaFieldName }"/>
<input type="submit"/>
</form>
`)
})
app.post('/login', (req, res) => {
res.type('html')
res.end(`
<p>CAPTCHA VALID: ${ captcha.check(req, req.body[captchaFieldName]) }</p>
`)
})
app.listen(8080, () => {
console.log('server started')
})

前端滑块验证

前端生成轨迹发送到后端验证,输入简单,但是容易被破解。

Node.JS用纯JavaScript生成图片或滑块式验证码功能 

https://gitee.com/LongbowEnterprise/SliderCaptcha

总结

以上所述是小编给大家介绍的Node.JS用纯JavaScript生成图片或滑块式验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
layui 对table中的数据进行转义的实例
Sep 12 #Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 #Javascript
小程序如何支持使用 async/await详解
Sep 12 #Javascript
layui清空,重置表单数据的实例
Sep 12 #Javascript
layui table 多行删除(id获取)的方法
Sep 12 #Javascript
详解Vue中CSS样式穿透问题
Sep 12 #Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 #Javascript
You might like
thinkphp循环结构用法实例
2014/11/24 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python 控制终端输出文字的实例
2019/07/12 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Pycharm github配置实现过程图解
2020/10/13 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
应届大专生求职信
2014/06/26 职场文书
化工专业求职信
2014/07/01 职场文书
敬老月活动总结
2014/08/28 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
大学生实习介绍信
2015/05/05 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
2016春季运动会开幕词
2016/03/04 职场文书