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

相关文章
|
6月前
|
前端开发 算法 网络安全
图片滑块验证功能很难吗?做个可以自己抠形状的图片滑块验证组件
图片滑块验证功能很难吗?做个可以自己抠形状的图片滑块验证组件
152 0
|
搜索推荐 开发工具
滑动验证码样式在线体验
您是否希望将您的验证界面变得更具创意和个性化?行为验证码样式正是您需要的!无论是炫酷的动画、舒缓的色彩搭配还是精美的图案,都能让您的验证界面脱颖而出,给用户留下深刻的印象。
滑动验证码样式在线体验
|
Web App开发 自然语言处理 安全
文字点选行为验证码(KgCaptcha快速入门)
凯格行为验证码 - KgCaptcha,采用业界通用的API接口方式,对接轻松简单,即可享受带来的产品服务能力。自定义样式及风控等级,完全个性化的设置,与你的应用完美融合。自由定义验证场景、安全策略、素材管理、自定义底图、拼图素材、验证模式、验证偏好、背景图片、Logo、跳转链接。定制需求由业务专家制定解决方案,支持私有化部署、多语言切换。
552 0
文字点选行为验证码(KgCaptcha快速入门)
|
6月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
266 3
|
前端开发
如何通过CSS动画制作一个优美的登录框
登录框是网站的重要组成部分,它不仅需要提供用户登录的功能,还需要有美观、易用的界面。本文将通过CSS动画制作一个优美的登录框,使用户的登录体验更加愉悦。
358 0
|
前端开发
CSS实现头像右上角消息数字提示
CSS实现头像右上角消息数字提示
95 0
|
前端开发
点击刷新图形验证码
点击刷新图形验证码
151 0
|
JavaScript API 数据安全/隐私保护
数美滑块验证码分析
本文以官网的滑块验证码为例,分析验证过程,完成模拟验证。
1419 0
数美滑块验证码分析
|
开发工具 数据安全/隐私保护
KgCaptcha 图形验证码水印Logo修改
还在苦恼怎么让你的验证码显示Logo吗,KgCaptcha 这个验证码产品,你可以随心所欲地设置你想要的Logo图片、链接地址、位置等。下面我就给大家介绍一下如何设置吧?
KgCaptcha 图形验证码水印Logo修改
|
监控 前端开发 开发工具
KgCaptcha 文字点选验证码数据监控
在信息时代, 对信息处理和利用能力的强弱成为决定企业兴衰成败的关键。一个成熟的数据监控展示平台是我们需要考虑的问题。 下面小编将用KgCaptcha,带领大家使用一个漂亮的数据监控展示平台!
KgCaptcha 文字点选验证码数据监控