koa2 中使用 svg-captcha 生成验证码
时间:2019-03-18
本文章向大家介绍koa2 中使用 svg-captcha 生成验证码,主要包括koa2 中使用 svg-captcha 生成验证码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 安装svg-captcha
$ npm install --save svg-captcha
2. 使用方法
- 生成有4个字符的图片和字符串
const svgCaptcha = require('svg-captcha')
const cap = svgCaptcha.create({
size: 4, // 验证码长度
width:160,
height:60,
fontSize: 50,
ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
noise: 2, // 干扰线条的数量
color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
background: '#eee' // 验证码图片背景颜色
})
console.log(c);
// {data: '<svg.../svg>', text: 'abcd'}
如图:
- 生成一个算术式和计算结果
const cap = svgCaptcha.createMathExpr({
size: 4, // 验证码长度
width:160,
height:60,
fontSize: 50,
ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
noise: 2, // 干扰线条的数量
color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
background: '#eee' // 验证码图片背景颜色
})
如图:
3. 在 koa2 项目中使用
const Koa = require('koa');
const Router = require('koa-router') // koa 路由中间件
const svgCaptcha = require('svg-captcha')
const app = new Koa();
const router = new Router(); // 实例化路由
router.get('/home', async (ctx, next) => {
const cap = svgCaptcha.create({
size: 4, // 验证码长度
width:160,
height:60,
fontSize: 50,
ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
noise: 2, // 干扰线条的数量
color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
background: '#eee' // 验证码图片背景颜色
})
let img = cap.data // 验证码
let text = cap.text.toLowerCase() // 验证码字符,忽略大小写
ctx.type = 'html'
ctx.body = `${img}<br><a href="javascript: window.location.reload();">${text}</a>`
});
app.use(router.routes());
app.listen(3333, () => {
console.log('This server is running at http://localhost:' + 3333)
})
- Mybatis_day02
- Golang构建HTTP服务(一)--- net/http库源码笔记
- Golang构建HTTP服务(二)--- Handler,ServeMux与中间件
- 使用Let's Encrypt的SSL证书配置HTTPS手记
- Mybatis_day01
- golang 如何验证struct字段的数据格式
- ggolot2 画ROC曲线
- 47. 访问MySql数据库实现增删改查 | 厚土Go学习笔记
- 39. channel管道 | 厚土Go学习笔记
- springmvc学习第二天
- 厚土Go学习笔记 | 38. goroutine轻量级线程
- 厚土Go学习笔记 | 37. 图片(image)生成器
- 编写地道的Go代码
- 开发你不能忽略的问题?JavaScript(JS)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树状数组-HDU3015 Disharmony Trees
- 放弃fastjson,拥抱Jackson
- Spring入门
- 贪心-HDU1789 Doing Homework again(活动安排问题)
- flink实战-实时计算平台通过api停止流任务
- JAVA初级岗面试知识点——基础篇
- flink实战-flink streaming sql 初体验
- flink实战教程-使用set实时计算当天网站uv
- 贪心-HDU3348 coins(钱币问题)
- 归并排序详解 -HDU4911 Inversion(逆序对)
- 数据结构与算法——稀疏数组
- Maven安装配置详细教程
- 数据结构与算法——冒泡排序
- MyBatis Generator逆向工程-你还在手写mapper吗?
- JSR303后端校验详解