{"id":17048830,"url":"https://github.com/saucxs/captcha-mini","last_synced_at":"2025-08-21T06:30:58.669Z","repository":{"id":57194225,"uuid":"173679111","full_name":"saucxs/captcha-mini","owner":"saucxs","description":"captcha-mini.js是一个生成验证码的插件，使用js和canvas生成的，确保后端服务被暴力攻击，简单判断人机以及系统的安全性，体积小，功能多，支持配置。展示地址：https://www.mwcxs.top/static/testTool/demo/index.html","archived":false,"fork":false,"pushed_at":"2019-07-10T08:40:08.000Z","size":22,"stargazers_count":113,"open_issues_count":3,"forks_count":27,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-09T18:48:06.820Z","etag":null,"topics":["canvas","captcha","captcha-mini","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saucxs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-04T05:26:08.000Z","updated_at":"2024-11-20T07:49:30.000Z","dependencies_parsed_at":"2022-09-01T00:31:46.051Z","dependency_job_id":null,"html_url":"https://github.com/saucxs/captcha-mini","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fcaptcha-mini","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fcaptcha-mini/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fcaptcha-mini/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fcaptcha-mini/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saucxs","download_url":"https://codeload.github.com/saucxs/captcha-mini/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230494921,"owners_count":18235046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","captcha","captcha-mini","javascript"],"created_at":"2024-10-14T09:53:08.611Z","updated_at":"2024-12-19T20:08:24.324Z","avatar_url":"https://github.com/saucxs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [captcha-mini](https://github.com/saucxs/captcha-mini)\n\n[![](https://img.shields.io/badge/Powered%20by-saucxs%20-brightgreen.svg)](https://github.com/saucxs/watermark-dom)\n[![GitHub license][license-image]][license-url]\n[![GitHub version][version-image]][version-url]\n[![GitHub stars][stars-image]][stars-url]\n[![GitHub forks][forks-image]][forks-url]\n[![GitHub issues][issues-image]][issues-image]\n[![npm download][download-image]][download-url]\n\n[license-image]: https://img.shields.io/github/license/saucxs/captcha-mini.svg\n[license-url]: https://github.com/saucxs/captcha-mini/blob/master/LICENSE\n[version-image]: https://img.shields.io/github/package-json/v/saucxs/captcha-mini.svg\n[version-url]: https://github.com/saucxs/captcha-mini/blob/master/package-json\n[stars-image]: https://img.shields.io/github/stars/saucxs/captcha-mini.svg\n[stars-url]: https://github.com/saucxs/captcha-mini/stargazers\n[forks-image]: https://img.shields.io/github/forks/saucxs/captcha-mini.svg\n[forks-url]: https://github.com/saucxs/captcha-mini/network\n[issues-image]: https://img.shields.io/github/issues/saucxs/captcha-mini.svg\n[issues-url]: https://github.com/saucxs/captcha-mini/issues\n[download-image]: https://img.shields.io/npm/dm/captcha-mini.svg\n[download-url]: https://npmjs.org/package/captcha-mini\n\n`captcha-mini.js`(~~之前叫captcha~~)是一个生成验证码的插件，使用js和canvas生成的，确保后端服务被暴力攻击，简单判断人机以及系统的安全性，体积小，功能多，支持配置。\n\n验证码插件内容，包含1、功能，验证码插件-使用，2、验证码插件使用，3、支持浏览，4、其他\n\n注意：基于本项目源码从事科研、论文、系统开发，\"最好\"在文中或系统中表明来自于本项目的内容和创意，否则所有贡献者可能会鄙视你和你的项目。 使用本项目源码请尊重程序员职业和劳动\n\n## 1、功能\n+ 版本v 1.0.0\n    - 1、支持随机字符内容配置，字符大小配置，字符类型配置，字符绘制方式配置，字符长度配置等\n    - 2、支持点位置随机，数量配置，点半径的配置\n    - 3、支持线条位置随机，宽度配置，线条数量的配置\n    - 4、支持随机前景色配置，区间值[0, 255]，可以使用默认值\n    - 5、支持随机背景色配置,区间值[0, 255]，可以使用默认值\n    - 6、支持点击更新视图\n    - 7、支持浏览器谷歌浏览器，火狐浏览器，Safari，IE10+等\n\n## 2、验证码插件-使用\n\n不依赖与其他的插件，实现起来很容易，`captcha-mini.js`是必须要引进的组件\n\n### 2.1 本地引入封装的js文件\n\n第一步：获取组件方式：`git clone https://github.com/saucxs/captcha-mini.git`\n\n第二步：clone后，在需要加验证码的相关页面引入验证码文件\"captcha-mini.js\"以及准备好装验证码容器:\n引入captcha内容\n```js\n\u003cscript type=\"text/javascript\" src=\"./captcha-mini.js\"\u003e\u003c/script\u003e\n```\n\n装验证码的容器\n```html\n\u003ccanvas width=\"240\" height=\"90\" id=\"captcha1\"\u003e\u003c/canvas\u003e\n```\n第三步：在确保页面DOM加载完毕之后，调用captcha的draw方法(手动加载):\n```js\n /*不传值，统一走默认值*/\n    let captcha1 = new CaptchaMini();\n    captcha1.draw(document.querySelector('#captcha1'), r =\u003e {\n        console.log(r, '验证码1');\n    });\n```\n```js\n/*传值,参数配置值，选择性配置*/\n    let captcha2 = new CaptchaMini({\n        lineWidth: 1,   //线条宽度\n        lineNum: 6,       //线条数量\n        dotR: 2,          //点的半径\n        dotNum: 25,       //点的数量\n        preGroundColor: [10, 80],    //前景色区间\n        backGroundColor: [150, 250], //背景色区间\n        fontSize: 30,           //字体大小\n        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型\n        fontStyle: 'stroke',      //字体绘制方法，有fill和stroke\n        content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容\n        length: 6    //验证码长度\n    }); \n    captcha2.draw(document.querySelector('#captcha2'), r =\u003e {\n        console.log(r, '验证码2');\n    });\n```\n\n使用插件的效果地址1：https://www.mwcxs.top/static/testTool/demo/index.html\n\n### 2.2 npm包引入\n\n第一步：npm获取验证码组件： \n````\nnpm install captcha-mini\n````\n第二步：引入验证码模块：\n````\nimport CaptchaMini from 'captcha-mini'\n或者\nvar CaptchaMini = require(\"captcha-mini\")\n````\n第三步：在确保页面DOM加载完毕之后，调用captcha的draw方法(手动加载):\n```js\n /*不传值，统一走默认值*/\n    let captcha1 = new CaptchaMini();\n    captcha1.draw(document.querySelector('#captcha1'), r =\u003e {\n        console.log(r, '验证码1');\n    });\n```\n```js\n/*传值,参数配置值，选择性配置*/\n    let captcha2 = new CaptchaMini({\n        lineWidth: 1,   //线条宽度\n        lineNum: 6,       //线条数量\n        dotR: 2,          //点的半径\n        dotNum: 25,       //点的数量\n        preGroundColor: [10, 80],    //前景色区间\n        backGroundColor: [150, 250], //背景色区间\n        fontSize: 30,           //字体大小\n        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型\n        fontStyle: 'stroke',      //字体绘制方法，有fill和stroke\n        content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容\n        length: 6    //验证码长度\n    }); \n    captcha2.draw(document.querySelector('#captcha2'), r =\u003e {\n        console.log(r, '验证码2');\n    });\n```\n\n## 3、支持浏览器\n\nChrome,FireFox,Safari,IE9及以上浏览器\n\n## 4、其他\n\n欢迎使用[watermark-dom](https://github.com/saucxs/watermark-dom)插件，功能：给B/S网站系统加一个很浅的dom水印插件。\n\n欢迎使用[captcha-mini](https://github.com/saucxs/captcha-mini)插件，功能：生成验证码的插件，使用js和canvas生成的\n\n欢迎使用[watermark-image](https://github.com/saucxs/watermark-image)插件，目前功能：图片打马赛克\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaucxs%2Fcaptcha-mini","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaucxs%2Fcaptcha-mini","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaucxs%2Fcaptcha-mini/lists"}