koa2 中使用 svg-captcha 生成验证码

1. 安装svg-captcha

$ npm install --save svg-captcha

2. 使用方法

  1. 生成有4个字符的图片和字符串
const svgCaptcha = require('svg-captcha')const cap = svgCaptcha.create({size: 4, // 验证码长度width:160,height:60,fontSize: 50,ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1inoise: 2, // 干扰线条的数量color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有background: '#eee' // 验证码图片背景颜色
})console.log(c);
// {data: '<svg.../svg>', text: 'abcd'}

如图:

image

  1. 生成一个算术式和计算结果
 const cap = svgCaptcha.createMathExpr({size: 4, // 验证码长度width:160,height:60,fontSize: 50,ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1inoise: 2, // 干扰线条的数量color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有background: '#eee' // 验证码图片背景颜色
})

如图:

image

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', // 验证码字符中排除 0o1inoise: 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)
})

转载于:https://www.cnblogs.com/cckui/p/10552832.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iris数据集 测试集_IRIS数据集的探索性数据分析

iris数据集 测试集Let’s explore one of the simplest datasets, The IRIS Dataset which basically is a data about three species of a Flower type in form of its sepal length, sepal width, petal length, and petal width. The data set consists of 50 samples from …

Oracle 12c 安装 Linuxx86_64

1)下载Oracle Database 12cRelease 1安装介质 官方的下载地址&#xff1a; 1&#xff1a;http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 2&#xff1a;https://edelivery.oracle.com/EPD/Download/get_form?egroup_aru_number16496…

python初学者_初学者使用Python的完整介绍

python初学者A magical art of teaching a computer to perform a task is called computer programming. Programming is one of the most valuable skills to have in this competitive world of computers. We, as modern humans, are living with lots of gadgets such as …

医疗大数据处理流程_我们需要数据来大规模改善医疗流程

医疗大数据处理流程Note: the fictitious examples and diagrams are for illustrative purposes ONLY. They are mainly simplifications of real phenomena. Please consult with your physician if you have any questions.注意&#xff1a;虚拟示例和图表仅用于说明目的。 …

ASP.NET Core中使用GraphQL - 第七章 Mutation

ASP.NET Core中使用GraphQL - 目录 ASP.NET Core中使用GraphQL - 第一章 Hello WorldASP.NET Core中使用GraphQL - 第二章 中间件ASP.NET Core中使用GraphQL - 第三章 依赖注入ASP.NET Core中使用GraphQL - 第四章 GrahpiQLASP.NET Core中使用GraphQL - 第五章 字段, 参数, 变量…

POM.xml红叉解决方法

方法/步骤 1用Eclipse创建一个maven工程&#xff0c;网上有很多资料&#xff0c;这里不再啰嗦。 2右键maven工程&#xff0c;进行更新 3在弹出的对话框中勾选强制更新&#xff0c;如图所示 4稍等片刻&#xff0c;pom.xml的红叉消失了。。。

JS前台页面验证文本框非空

效果图&#xff1a; 代码&#xff1a; 源代码&#xff1a; <script type"text/javascript"> function check(){ var xm document.getElementById("xm").value; if(xm null || xm ){ alert("用户名不能为空"); return false; } return …

05精益敏捷项目管理——超越Scrum

00.我们不是不知道它会给我们带来麻烦&#xff0c;只是没想到麻烦会有这么多。——威尔.罗杰斯 01.知识点&#xff1a; a.Scrum是一个强大、特意设计的轻量级框架&#xff0c;器特性就是将软件开发中在制品的数量限制在团队层级&#xff0c;使团队有能力与业务落班一起有效地开…

带标题的图片轮询展示

为什么80%的码农都做不了架构师&#xff1f;>>> <div> <table width"671" cellpadding"0" cellspacing"0"> <tr height"5"> <td style"back…

linux java 查找进程中的线程

这里对linux下、sun(oracle) JDK的线程资源占用问题的查找步骤做一个小结&#xff1b;linux环境下&#xff0c;当发现java进程占用CPU资源很高&#xff0c;且又要想更进一步查出哪一个java线程占用了CPU资源时&#xff0c;按照以下步骤进行查找&#xff1a;(一)&#xff1a;通过…

定位匹配 模板匹配 地图_什么是地图匹配?

定位匹配 模板匹配 地图By Marie Douriez, James Murphy, Kerrick Staley玛丽杜里兹(Marie Douriez)&#xff0c;詹姆斯墨菲(James Murphy)&#xff0c;凯里克史塔利(Kerrick Staley) When you request a ride, Lyft tries to match you with the driver most suited for your…

Sprint计划列表

转载于:https://www.cnblogs.com/zhs20160715/p/9953586.html

软件测试框架课程考试_那考试准备课程值得吗?

软件测试框架课程考试By Levi Petty李维佩蒂(Levi Petty) This project uses a public, synthesized exam scores dataset from Kaggle to analyze average scores in Math, Reading, and Writing subject areas, relative to the student’s parents’ level of education an…

DOCKER windows安装

DOCKER windows安装 DOCKER windows安装 1.下载程序包2. 设置环境变量3. 启动DOCKERT4. 分析start.sh5. 利用SSH工具管理6. 下载镜像 6.1 下载地址6.2 用FTP工具上传tar包6.3 安装6.4 查看镜像6.5 运行 windows必须是64位的 1.下载程序包 安装包 https://github.com/boot2doc…

Elasticsearch Reference [6.7] » Modules » Network Settings

2019独角兽企业重金招聘Python工程师标准>>> Search Settings Node Network Settingsedit Elasticsearch binds to localhost only by default. This is sufficient for you to run a local development server (or even a development cluster, if you star…

【百度】大型网站的HTTPS实践(一)——HTTPS协议和原理

大型网站的HTTPS实践&#xff08;一&#xff09;——HTTPS协议和原理 原创 网络通信/物联网 作者&#xff1a;AIOps智能运维 时间&#xff1a;2018-11-09 15:07:39 349 0前言 百度于2015年上线了全站HTTPS的安全搜索&#xff0c;默认会将HTTP请求跳转成HTTPS。从今天开始&…

LVS原理介绍及安装过程

一、ARP技术概念介绍 为什么讲ARP技术&#xff0c;因为平常工作中有接触。还有就是LVS的dr模式是用到arp的技术和数据。 1、什么是ARP协议 ARP协议全程地址解析协议&#xff08;AddressResolution Protocol&#xff0c;ARP&#xff09;是在仅知道主机的IP地址时确定其物理地…

DNS Bind9在windows7下

有些公司技术力量薄弱一些&#xff0c;一直在用windows系统&#xff0c;所以本文从windows出发&#xff0c;安装bind&#xff0c;利用它的view功能&#xff0c;做智能DNS&#xff0c;解决双线机房南北电信联通访问问题前言&#xff1a; 搞LINUX的朋友都知道&#xff0c;bind是l…

DNS的几个基本概念:

一&#xff0e; 根域 就是所谓的“.”&#xff0c;其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.&#xff08;最后有一点&#xff09;&#xff0c;一般我们在浏览器里输入时会省略后面的点&#xff0c;而这也已经成为了习惯。 根域服务器我们知道有13台&#xff…

D3.js 加标签

条形图还可以配上实际的数值,我们通过文本元素添加数据值。 svg.selectAll("text").data(dataset).enter().append("text").text(function(d){return d;}) 通过 x 和 y 值来定位文本元素。 .attr("text-anchor", "middle").attr("…