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', // 验证码字符中排除 0o1i
noise: 2, // 干扰线条的数量
color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
background: '#eee' // 验证码图片背景颜色
}) console.log(c);
// {data: '<svg.../svg>', text: 'abcd'}

如图:

  1. 生成一个算术式和计算结果
 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)
})

koa2 中使用 svg-captcha 生成验证码的更多相关文章

  1. captcha ~ 生成验证码图片

    验证码在我们的世界中可以保护我们的信息安全的一个保障之一 这就是生成验证码的代码     # 导报 from captcha.image import ImageCaptcha #验证码的包 from ...

  2. Captcha生成验证码,docker部署时问题

    https://blog.csdn.net/huofuman960209/article/details/100738712 Dockerfile FROM openjdk:8-jdk-alpine ...

  3. 6月19 使用tp框架生成验证码及文件上传

    ThinkPHP中自带能生成验证码的类:ThinkPHP/Library/Think/Verify.class.php 默认情况下,验证码的字体是随机使用 ThinkPHP/Library/Think ...

  4. SpringMvc项目中使用GoogleKaptcha 生成验证码

    前言:google captcha 是google生成验证码的一个工具类,其原理是将随机生成字符串保存到session中,同时以图片的形式返回给页面,之后前台页面提交到后台进行对比. 1.jar包准备 ...

  5. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  6. JAVA WEB项目中生成验证码及验证实例(附源码及目录结构)

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  7. java中生成验证码,以及验证码的使用

    java中生成验证码,以及验证码的使用: 1:验证码生成工具类: import java.awt.Color; import java.awt.Font; import java.awt.Graphi ...

  8. servlet中生成验证码

    在servlet中生成验证码 package login; import java.awt.Color; import java.awt.Graphics; import java.awt.image ...

  9. js和php中几种生成验证码的方式

    之前做过取随机数和生成验证码的练习,都是通过取随机数作为数组下标,然后从数组中取值的方式(js): /*验证码*/ function sj_yzm(){ //存一个包括数字和字母的数组 var zon ...

  10. 在yii2.0中封装一个生成验证码的控制器

    frontend目录下/封装的验证码类: <?php namespace frontend\controllers; use yii\base\Controller; class CapathC ...

随机推荐

  1. Android为TV端助力 帧动画

    首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...

  2. JPTabBar 详细介绍

    一个强大的TabBar,实现市面上APP基本上所拥有的功能,代码简单构造容易!只需不足5行代码就把基本的界面搭建出来了 附上效果图: 主要功能特色: 多种Tab切换的动画效果 实现底部导航中间按钮凸出 ...

  3. 虚拟机中安装Virtualbox,嵌套的虚拟机不能运行64位系统

    https://www.quora.com/Can-I-install-Virtualbox-in-a-virtual-machine Here is a previous question on Q ...

  4. 使用Visual Studio Team Services敏捷规划和项目组合管理(四)——冲刺计划和任务板

    使用Visual Studio Team Services敏捷规划和项目组合管理(四)--冲刺计划和任务板 团队在sprint计划会议期间创建冲刺积压工作项,通常在冲刺的第一天召开该会议.每个冲刺都对 ...

  5. 使用IEDriverServer.exe驱动IE11,实现自动化测试

            +  下载IEDriverServer   http://dl.pconline.com.cn/download/771640-1.html 解压缩得到IEDriverServer.e ...

  6. java.lang.IllegalStateException: Cannot forward after response has been committed的一个情况解决方法

    java.lang.IllegalStateException: Cannot forward after response has been committed xxx.xxx.doPost(upd ...

  7. 排序算法----冒泡排序java(写得绝对比其他博文易懂明了实用)

    本来不想写的,看到别人写的都不符合自己心意 需进行n(n-1)/2次比较和记录移动,时间复杂度为O(n*n) import java.util.Arrays; import java.util.Sca ...

  8. C#-方法(八)

    方法是什么 方法是C#中将一堆代码进行进行重用的机制 他是在类中实现一种特定功能的代码块,将重复性功能提取出来定义一个新的方法 这样可以提高代码的复用性,使编写程序更加快捷迅速 方法格式 访问修饰符 ...

  9. memory 监控 mysql vs percona vs maria

    oracle mysql 5.7 在performance_schema 通过以下表展现内存信息.这些表实际engine为performance_schema.这些表数据实际是以数组的形式存储在内存中 ...

  10. 便捷的方式在手机上查看Unity3D的Console Log(调试信息 日志)

    Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itsel ...