KgCaptcha 图形验证码图片样式设置

简介: 在一次项目开发中,需要对滑动拼图验证码的宽高、拼图缺口、滑块等样式进行自定义设置,于是我找啊找,终于让我找到了 KgCaptcha,用户可以自己设置验证码尺寸、外框、缺口样式、滑块等。下面就由我来介绍一下如何设置吧!

前言

在一次项目开发中,需要对滑动拼图验证码的宽高、拼图缺口、滑块等样式进行自定义设置,于是我找啊找,终于让我找到了 KgCaptcha,用户可以自己设置验证码尺寸、外框、缺口样式、滑块等。下面就由我来介绍一下如何设置吧!

01 图片宽度

验证码的图片宽度,必须与滑动框同步宽度、同步修改,单位 px。

15.png

效果如下:

16.PNG


02 图片高度

验证码的底图高度,单位 px。

18.png

效果如下:

19.PNG


03 图片圆角边框

设置底图边框圆角,单位 px

21.png

效果如下:

22.PNG


04 小方块旋转角度

验证码拼图缺口的旋转角度——不旋转 / 正角旋转 / 随机角度

24.png

正角旋转:45|90|180|360 度旋转,图案比较美观,体验度好

25.PNG

随机角度:随机旋转,体验一般,防御力较强

26.PNG


05 小方块透明度

设置拼图小方块透明度,范围0-1

28.png

设置效果如下:

29.PNG


06 小方块形状

普通模式:拼图小方块使用标准形状

31.png

随机模式:拼图小方块使用随机形状

32.PNG


07 拼图容错值

设置拼图容错范围,单位 px

34.png

设置效果如下:

35.PNG


相关链接

SDK下载:
https://github.com/KgCaptcha

在线体验:
https://www.kgcaptcha.com/demo/

开发文档:
https://www.kgcaptcha.com/article?pid=6

相关文章
|
前端开发 API
uniapp中为什么会出现跨域问题,如何解决
uniapp中为什么会出现跨域问题,如何解决
4313 0
|
消息中间件 运维 Java
【消息中间件】在Docker下安装的RocketMQ,使用mqadmin命令报错解决[10015:signature-failed]
前在Docker下安装了RocketMQ以及他的管理平台,但是管理平台在运维的时候只能满足我们部分的需求,所以为了在集群运维时能够的得心应手,研究了下mqadmin的使用,没想到一开始就遇到了报错,在这里和大家分享下解决的方法。
1675 101
|
8月前
|
移动开发 数据可视化 前端开发
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
腾讯推出的开源项目 **tmagic-editor** 是一款所见即所得的页面可视化编辑器,支持H5、PC、TV等多种页面类型。它已应用于腾讯视频会员、腾讯会议等业务,每月生产和发布数百个页面,极大提高了开发效率。通过简单的拖拽和配置,非技术人员也能轻松创建复杂页面。tmagic-editor 支持 Vue2/Vue3 和 React 等多种前端框架,并提供了丰富的扩展功能,满足不同业务需求。
747 3
|
12月前
|
缓存 JavaScript UED
|
12月前
|
XML 前端开发 Java
【Spring】@RequestMapping、@RestController和Postman
【Spring】@RequestMapping、@RestController和Postman
205 2
【Spring】@RequestMapping、@RestController和Postman
|
XML 算法 Java
Android 开发人脸识别之自动识别验证码功能讲解及实现(超详细 附源码)
Android 开发人脸识别之自动识别验证码功能讲解及实现(超详细 附源码)
718 0
|
存储 算法 安全
加密解密AES(证件号、手机号)
加密解密AES(证件号、手机号)
|
移动开发 小程序 UED
科普:App、H5和小程序是什么?
科普:App、H5和小程序是什么?
2547 0
|
传感器 机器学习/深度学习 算法
【滤波跟踪】基于扩展卡尔曼滤波器实现 IMU 和 GPS 数据计算无人机的姿态附matlab代码
【滤波跟踪】基于扩展卡尔曼滤波器实现 IMU 和 GPS 数据计算无人机的姿态附matlab代码
layer.open的常用参数例子
layer.open的常用参数例子
349 1