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 相关文章推荐
js全屏显示显示代码的三种方法
Nov 11 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
深入理解js promise chain
May 05 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 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
php4的彩蛋
2006/10/09 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php数组转成json格式的方法
2015/03/09 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python subprocess库的使用详解
2018/10/26 Python
python 多个参数不为空校验方法
2019/02/14 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
环保倡议书400字
2014/05/15 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书