一般类似这样的验证码已经有很成熟的解决方案了。比如js破解,图像识别破解等等。但是我在项目中遇到的验证码有一点不同是下面这种验证码(拼夕夕的验证码)可以看到背景更复杂,而且它使用两个缺口,两个缺口的形状不一样,因此对于此类验证码识别更加困难。
二、采用的方法
对该类新型验证码分析,最开始准备使用深度学习的方法,大力出奇迹,但是有一个现实问题没多少数据。公司目前收集的也只有六七十张,于是只好放弃深度学习,采用传统方法opencv来做。使用opencv做的思路就是,获取滑块图和背景图,进行模板匹配,匹配度最高作为结果输出
1.滑块图、背景图切分
想要拿到干净的滑块图和背景图需要进行js破解,这个破解比较耗时一张验证码大概需要30s,30s后验证码都失
unlock.js插件具有以下特点:滑动解锁。
尺寸、颜色、字体大小等都可以个性化定制。
完成解锁后会有回调函数,用来触发进一步的数据处理。
如何使用
1.
首先在页面中引入unlock.css和unlock.js文件。
<link
href="css/unlock.css"
rel="external
nofollow"
rel="stylesheet">
<script
src='js/unlock.js'></script>
2.
然后布置简单的HTML的结构,使用一个<div>作为滑块的容器。
<!--滑块容器-->
<div
id
=
"foo"></div>
3.
最后初始化插件。在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滑动解锁插件。
var
$container
=
$('#foo')
$container.slideToUnlock(options)
配置参数
unlock.js滑动解锁插件的配置参数有:
参数
默认值
描述
width
默认为容器的宽度
滑块的宽度
height
默认为容器的高度
滑块的高度
bgColor
#E8E8E8
滑块的背景颜色
progressColor
#FFE97F
progress的颜色
handleColor
#fff
滑块手柄的颜色
succColor
#78D02E
成功解锁后的颜色
text
'slide
to
unlock'
滑块上的默认文字
textColor
#000
文字的颜色
succText
'ok!'
成功解锁后显示的文字
succTextColor
#000
成功解锁后显示的文字颜色
succFunc
function()
{
alert('successfully
unlock!')
}
成功解锁后的回调函数
更多有关unlock插件信息,请访问项目github地址为:
https://github.com/menthe/unlock.js
以上所述是小编给大家介绍的jQuery使用unlock.js插件实现滑动解锁思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!