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中的parseInt使用技巧
Sep 03 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
Javascript缓存API
Jun 14 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue中引入mxGraph的步骤详解
May 17 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数据库操作面向对象的优点
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php防止用户重复提交表单
2015/11/02 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js实现简单的验证码
2015/12/25 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python入门之后再看点什么好?
2018/03/05 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python实现字符串和数字拼接
2020/03/02 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
电脑教师的自我评价
2013/12/18 职场文书
党校学习自我鉴定
2014/02/24 职场文书
初中班主任评语
2014/04/24 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
市场营销计划书范文
2015/01/16 职场文书
团支部书记竞选稿
2015/11/21 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript