• Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

captcha-mini.js是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置。展示地址:https://www.mwcxs.top/static/testTool/demo/index.html

captcha-mini

GitHub license GitHub version GitHub stars GitHub forks GitHub issues npm download

captcha-mini.js(之前叫captcha)是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置。

验证码插件内容,包含1、功能,验证码插件-使用,2、验证码插件使用,3、支持浏览,4、其他

注意:基于本项目源码从事科研、论文、系统开发,"最好"在文中或系统中表明来自于本项目的内容和创意,否则所有贡献者可能会鄙视你和你的项目。 使用本项目源码请尊重程序员职业和劳动

1、功能

  • 版本v 1.0.0
    • 1、支持随机字符内容配置,字符大小配置,字符类型配置,字符绘制方式配置,字符长度配置等
    • 2、支持点位置随机,数量配置,点半径的配置
    • 3、支持线条位置随机,宽度配置,线条数量的配置
    • 4、支持随机前景色配置,区间值[0, 255],可以使用默认值
    • 5、支持随机背景色配置,区间值[0, 255],可以使用默认值
    • 6、支持点击更新视图
    • 7、支持浏览器谷歌浏览器,火狐浏览器,Safari,IE10+等

2、验证码插件-使用

不依赖与其他的插件,实现起来很容易,captcha-mini.js是必须要引进的组件

2.1 本地引入封装的js文件

第一步:获取组件方式:git clone https://github.com/saucxs/captcha-mini.git

第二步:clone后,在需要加验证码的相关页面引入验证码文件"captcha-mini.js"以及准备好装验证码容器: 引入captcha内容

<script type="text/javascript" src="./captcha-mini.js"></script>

装验证码的容器

<canvas width="240" height="90" id="captcha1"></canvas>

第三步:在确保页面DOM加载完毕之后,调用captcha的draw方法(手动加载):

 /*不传值,统一走默认值*/
    let captcha1 = new CaptchaMini();
    captcha1.draw(document.querySelector('#captcha1'), r => {
        console.log(r, '验证码1');
    });
/*传值,参数配置值,选择性配置*/
    let captcha2 = new CaptchaMini({
        lineWidth: 1,   //线条宽度
        lineNum: 6,       //线条数量
        dotR: 2,          //点的半径
        dotNum: 25,       //点的数量
        preGroundColor: [10, 80],    //前景色区间
        backGroundColor: [150, 250], //背景色区间
        fontSize: 30,           //字体大小
        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
        fontStyle: 'stroke',      //字体绘制方法,有fill和stroke
        content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容
        length: 6    //验证码长度
    }); 
    captcha2.draw(document.querySelector('#captcha2'), r => {
        console.log(r, '验证码2');
    });

使用插件的效果地址1:https://www.mwcxs.top/static/testTool/demo/index.html

2.2 npm包引入

第一步:npm获取验证码组件:

npm install captcha-mini

第二步:引入验证码模块:

import CaptchaMini from 'captcha-mini'
或者
var CaptchaMini = require("captcha-mini")

第三步:在确保页面DOM加载完毕之后,调用captcha的draw方法(手动加载):

 /*不传值,统一走默认值*/
    let captcha1 = new CaptchaMini();
    captcha1.draw(document.querySelector('#captcha1'), r => {
        console.log(r, '验证码1');
    });
/*传值,参数配置值,选择性配置*/
    let captcha2 = new CaptchaMini({
        lineWidth: 1,   //线条宽度
        lineNum: 6,       //线条数量
        dotR: 2,          //点的半径
        dotNum: 25,       //点的数量
        preGroundColor: [10, 80],    //前景色区间
        backGroundColor: [150, 250], //背景色区间
        fontSize: 30,           //字体大小
        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
        fontStyle: 'stroke',      //字体绘制方法,有fill和stroke
        content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容
        length: 6    //验证码长度
    }); 
    captcha2.draw(document.querySelector('#captcha2'), r => {
        console.log(r, '验证码2');
    });

3、支持浏览器

Chrome,FireFox,Safari,IE9及以上浏览器

4、其他

欢迎使用watermark-dom插件,功能:给B/S网站系统加一个很浅的dom水印插件。

欢迎使用captcha-mini插件,功能:生成验证码的插件,使用js和canvas生成的

欢迎使用watermark-image插件,目前功能:图片打马赛克

More Repositories

1

watermark-dom

watermark.js是基于DOM对象实现的BS系统的水印,确保系统保密性,安全性,降低数据泄密风险,简单轻量,支持多属性配置,动态计算水印,水印防被删(监听水印组件元素删除并重新添加,监听改变水印的属性并重新添加)。1、支持2种方式导入使用,2、水印插件-testTool(测试工具),3、内置3种全局API方法,等等。欢迎访问:
JavaScript
1,316
star
2

weekly

周报系统的技术栈主要是node+vue+redis+mysql+es6,一个企业管理系统,企业员工汇报每周工作情况,以及完成情况,各级负责人可以查看和提醒相应未写周报人员,后端完全使用nodeJS,数据库使用mysql,基于nodejs的thinkjs框架搭建的,如果喜欢nodeJS写的后端,支持大前端,支持全栈开发。地址:http://weekly.mwcxs.top
Vue
193
star
3

nodeJSBlog

sau交流学习社区系统,是一个拥有博客功能和社区分享评论功能的一个学习分享平台,后端完全使用nodeJS,数据库使用mysql,基于nodejs的thinkjs框架搭建的 ,前台系统:https://www.mwcxs.top 后台系统:https://www.mwcxs.top/admin
HTML
54
star
4

structure-admin

技术栈:nodeJS+vue+vuex+mysql+redis,前端使用vue的element-ui的组件库,后端使用nodeJS的服务,数据库mysql,缓存使用的还redis
JavaScript
51
star
5

happy-chat-web

一款聊天的技术产品,支持pc端,无线端,桌面端和android端。支持文字,emoji表情,https和http2.0,全局Router.beforEach实现数据埋点等,技术栈:vue+vuex+koa2+websocketIO+mysql+redis。桌面端(win)采用的electron实现,android端采用cordova。地址https://chat.chengxinsong.cn
Vue
43
star
6

full_stack_knowledge_list

full_stack_knowledge_list,开发知识体系,主要是全栈开发知识体系。 目的:每一个开发人员都应该形成自己的知识体系,做到提纲挈领。在设计代码,聊技术,面试,系统结构设计,架构设计等时候,能够游刃有余,充满自信。 特点: 1、前端领域:Html和css基础,JavaScript,计算机基础,框架和类库,前端工程,项目构建,算法与数据结构等。 2、后端领域:欢迎补充。。。
JavaScript
36
star
7

happy-chat-node

一款聊天的技术产品,支持pc端,无线端,桌面端和android端。支持文字,emoji表情,https和http2.0,全局Router.beforEach实现数据埋点等,技术栈:vue+vuex+koa2+websocketIO+mysql+redis。桌面端(win)采用的electron实现,android端采用cordova。地址https://chat.chengxinsong.cn
JavaScript
33
star
8

wx_phoneBook

微信小程序-通讯录,一个非常简单的入门级的微信小程序
JavaScript
27
star
9

loveBook

loveBook爱上阅读,是一款webapp的读小说等书籍的并且阅读的应用。http://book.mwcxs.top
Vue
20
star
10

watermark-image

watermark-image.js是图片水印组件,降低数据泄密风险。1、图片水印插件-使用,2、图片水印插件-testTool(测试工具)
17
star
11

songEagle

一个支持服务端渲染SSR的博客,nuxt+vue+vuex+websocket+koa2+mysql+redis+nginx+jwt,包含文章,实验室,按照类别和标签分类,文章评论支持github第三方登录等,首页视觉可视化采用threejs+ WebGLRenderer实现网状波浪和三菱锥的动态效果。后台管理系统使用jwt做鉴权认证登录,支持markdown写文章,文章实时保存等功能。
Vue
9
star
12

check-brower

checkBower是一个检测当前环境的是PC端还是无线端,浏览器类型和版本号的插件
7
star
13

saucxs.github.io

hexo+github搭建自己的博客网站,
HTML
7
star
14

thinkJSLearning

thinkJS学习过程
JavaScript
7
star
15

happyChatApp

乐聊,一个快乐聊天的应用,支持pc端和无线端和安卓APP。
Java
6
star
16

songEagle_backManage

一个支持服务端渲染SSR的博客,nuxt+vue+vuex+websocket+koa2+mysql+redis+nginx+jwt,包含文章,实验室,按照类别和标签分类,文章评论支持github第三方登录等,首页视觉可视化采用threejs+ WebGLRenderer实现网状波浪和三菱锥的动态效果。后台管理系统使用jwt做鉴权认证登录,支持markdown写文章,文章实时保存等功能。
JavaScript
6
star
17

editor

Editor是一款简洁的 Markdown 编辑器。自动将md转成微信公众号图文,拥有一键发送到指定平台能力,支持独立平台独立配置, 支持md样式配置等功能。
JavaScript
4
star
18

jquery-component

jquery-component是自己在开发中遇到问题,总结,形成自己的开发组件
JavaScript
3
star
19

safeguard-UI

react脚手架,react.js组件库
JavaScript
3
star
20

structure_webApp

webApp开发架子,快速搭建webApp相应的页面
JavaScript
3
star
21

hexo-blog-origin

hexo+github搭建的博客,原始项目代码,可以clone,运行,查看hexo-blog
JavaScript
3
star
22

LogisticsManagementSystem

LogisticsManagementSystem,物流管理系统。地址:http://wuliu.mwcxs.top
Vue
3
star
23

chat-robot

chat-robot,一个是使用koa和vue做的简单的机器人,接入的是图灵机器人。目前框架:koa+vue
JavaScript
2
star
24

structure-web

structure-web是一个前台2C系统的架子,前后端分离的系统,包含两部分:前端vue&vuex,后端node,技术栈:nuxtjs+vue+vuex+koa2+redis+mysql,全栈开发。
Vue
2
star
25

koa-template

JavaScript
1
star
26

resume

一份简单的简历。地址:http://resume.chengxinsong.cn
HTML
1
star
27

loveBookApp

loveBookApp
Java
1
star
28

structure-admin-web

structure-admin-web
JavaScript
1
star
29

python3Coding

pythonCoding一些入门爬虫例子
Python
1
star
30

PointSingleSystem

PointSingleSystem
JavaScript
1
star
31

vue-node-cli

vue-node-cli拥有vue和thinkjs构建项目的脚手架;前端vue+vuex;后端是node的thinkjs框架,带有mysql数据库文件。
JavaScript
1
star