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 相关文章推荐
javascript String 对象
Apr 25 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
childNodes.length与children.length的区别
May 14 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php 保留字列表
2012/10/04 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python自定义一个异常类的方法
2019/06/27 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python可视化实现KNN算法
2019/10/16 Python
详解python中docx库的安装过程
2019/11/08 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
北京申奥口号
2014/06/19 职场文书
工程技术员岗位职责
2015/04/11 职场文书
单位同意报考证明
2015/06/17 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python