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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 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/07/18 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php判断linux下程序问题实例
2015/07/09 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Javascript Promise用法详解
2018/05/10 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
Python实现list反转实例汇总
2014/11/11 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python中取整的几种方法小结
2017/01/06 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python创建学生管理系统
2019/11/22 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
对孩子的寄语
2014/04/09 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
青年文明号申报材料
2014/12/23 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript