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代码
Jan 28 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue+element ui实现锚点定位
Jun 29 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
python双向链表实现实例代码
2013/11/21 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
3种python调用其他脚本的方法
2020/01/06 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
护理学专业推荐信
2013/12/03 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
合作协议书范文
2014/08/20 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android