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 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
vue 组件简介
Jul 31 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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 ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
如何用python批量调整视频声音
2020/12/22 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
介绍一下#error预处理
2015/09/25 面试题
个人综合鉴定材料
2014/05/23 职场文书
人事专员岗位说明书
2014/07/29 职场文书
新店开张活动方案
2014/08/24 职场文书
公司员工离职证明书
2014/10/04 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
小学英语复习计划
2015/01/19 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android