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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php实现求相对时间函数
2015/06/15 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
js函数内变量的作用域分析
2015/01/12 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现进程间通信简单实例
2014/07/23 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android