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 相关文章推荐
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python根据url地址下载小文件的实例
2018/12/18 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
金讯Java笔试题目
2013/06/18 面试题
外包公司软件测试工程师
2014/11/01 面试题
大专生工程监理求职信
2013/10/04 职场文书
渡河少年教学反思
2014/02/12 职场文书
教师教学评估方案
2014/05/09 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
给校长的建议书作文500字
2015/09/14 职场文书