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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
微信小程序纯文本实现@功能
Apr 08 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传输数据的代码
2007/11/13 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Django配置跨域并开发测试接口
2020/11/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
新浪网技术部笔试题
2016/08/26 面试题
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
计算机系统管理员求职信
2014/06/20 职场文书
班级出游活动计划书
2014/08/15 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
学习经验交流会总结
2015/11/02 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python