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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
javascript基本语法
May 31 Javascript
js实现交通灯效果
Jan 13 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP简洁函数小结
2011/08/12 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php的常量和变量实例详解
2017/06/27 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python内存管理机制原理详解
2019/08/12 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
司机岗位职责
2013/11/15 职场文书
《大海那边》教学反思
2014/04/09 职场文书
煤矿安全生产标语
2014/06/06 职场文书
本科生求职信
2014/06/17 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
课程设计感想范文
2015/08/11 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS