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小问题说明
Sep 26 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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中函数rand和mt_rand的区别比较
2012/12/26 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python删除文本中行数标签的方法
2018/05/31 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python如何获取文件路径/目录
2020/09/22 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
秋游活动策划方案
2014/02/16 职场文书
怎么写好自荐书
2014/03/02 职场文书
环境整治工作方案
2014/05/18 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
党员反邪教心得体会
2016/01/15 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Python+tkinter实现高清图片保存
2022/03/13 Python