js+cavans实现图片滑块验证
程序员文章站
2022-08-18 08:14:49
本文实例为大家分享了js+cavans实现图片滑块验证的具体代码，供大家参考，具体内容如下js已封装好，拿来即用，兼容pc端和移动端,效果：移动端：pc端：原理就不解释了，我之前的博客已经说过，只不过...
本文实例为大家分享了js+cavans实现图片滑块验证的具体代码，供大家参考，具体内容如下
js已封装好，拿来即用，兼容pc端和移动端,
效果：
移动端：
pc端：
原理就不解释了，我之前的博客已经说过，只不过这个版本是结合了canvas实现，又兼容了pc端，直接拿代码就能用了。
代码：html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
* {
margin: 0;
padding: 0;
}
.slidermodel {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.slidermodel .cont{padding: 20px; width: 280px; background: #fff;border-radius: 6px;margin: 50px auto;}
.showmessage {
text-align: center;
font-size: 14px;
height: 30px;
line-height: 30px;
}
#canvas_wrap{
width: 280px;
}
#canvas_wrap canvas{
display: block;
}
</style>
</head>
<body>
<div class="slidermodel">
<div class="cont">
<div id="canvas_wrap"></div>
<div class="showmessage"></div>
</div>
<div id="close">关闭</div>
</div>
<div id="open">打开</div>
</body>
<script src="newslider.js"></script>
<script>
function showmessage(msg,color){
var showmessage = document.queryselector('.showmessage');
showmessage.innerhtml=msg;
showmessage.style.color=color;
}
var obj={
el:'#canvas_wrap',
w:280,
h:150,
imgarr:['images/sliderz/1.jpg','images/sliderz/2.jpg','images/sliderz/3.jpg','images/sliderz/4.jpg'],
slidericon:'images/sliderz/sangangy.png',
refresh:function(){
showmessage('','#333')
},
finish:function(e){
e? showmessage('验证成功!','green') : showmessage('验证失败,请重试','red');
}
}
document.queryselector('#open').onclick=function(){ //打开
document.queryselector('.slidermodel').style.display="block";
new window.$newslider(obj);
}
document.queryselector('#close').onclick=function(){ //关闭
document.queryselector('.slidermodel').style.display="none";
}
</script>
</html>
newslider.js:
(function(){
function slider(params){
var obj={
el:params.el,
w:params.w || 280, //canvas的宽度
h:params.h || 150, //canvas的高度
range:params.range || 5, //相差多少像素内触发成功
imgarr:params.imgarr || [], //图片数组
sliderw:36, //slider的边长
slidericon:params.slidericon || '',
refresh:params.refresh, //刷新回调
finish:params.finish , //完成回调
};
//创建canvas的父元素
var container=document.queryselector(obj.el);
container.innerhtml='';
var canvas_wrap=document.createelement('div');
canvas_wrap.classname="canvas_wrap";
canvas_wrap.style.csstext="position:relative;overflow:hidden;border-radius:4px;width:"+obj.w+"px;height:"+obj.h+"px;background:#fff"
//创建大小canvas元素
var bigcanvas=document.createelement('canvas');
var smartcanvas=bigcanvas.clonenode(true);
bigcanvas.width=smartcanvas.width=obj.w;
bigcanvas.height=smartcanvas.height=obj.h;
bigcanvas.style.csstext=smartcanvas.style.csstext="position:absolute;left:0;top:0";
var bcxt=bigcanvas.getcontext('2d'),scxt=smartcanvas.getcontext('2d'),img=new image();
//创建标题和刷新按钮
var titledom=document.createelement('div');
var refreshdom=document.createelement('div');
titledom.classname="slider_title";
refreshdom.classname="slider_refresh";
titledom.style.csstext="position:relative;width:"+obj.w+"+px;height:60px;text-align:center;font-size:18px; line-height:60px";
refreshdom.style.csstext="position:absolute;top:0;right:14px;font-size:14px;color:green;cursor: pointer";
titledom.innerhtml="图形验证";
refreshdom.innerhtml="刷新";
//创建拖拽区域
var slider_wrap=document.createelement('div'),slider=document.createelement('div'),slidercover=document.createelement('div');
slider_wrap.classname="slider_wrap";
slider.classname="canvas_slider";
slidercover.classname="slidercover";
slider_wrap.innertext="拖动左边滑块完成上方拼图";
slider_wrap.style.csstext="width:"+obj.w+"px;height:30px; border-radius:30px;line-height:30px; position:relative;margin-top:10px;text-align:center;box-shadow: inset 0 0 4px #ccc;font-size: 14px;color:#999";
slider.style.csstext="cursor: pointer;position: absolute;left: 0;top: 50%;z-index: 2;height: "+obj.sliderw+"px;width: "+obj.sliderw+"px;background:rgb(0, 124, 255) url("+obj.slidericon+") no-repeat center;background-size: 60% 60%;border-radius: "+obj.sliderw+"px;line-height:"+obj.sliderw+"px;text-align:center;transform: translatey(-50%);";
slidercover.style.csstext="position: absolute;left: 0;top:0;width:0;height:100%;background:#eee;border-radius:30px;"
slider_wrap.appendchild(slider);
slider_wrap.appendchild(slidercover);
canvas_wrap.appendchild(bigcanvas);
canvas_wrap.appendchild(smartcanvas);
titledom.appendchild(refreshdom);
container.appendchild(titledom);
container.appendchild(canvas_wrap);
container.appendchild(slider_wrap);
var canvascoverl=0,startdownx=0,smartcanvasbl=0,slidermaxrange=obj.w-obj.sliderw;
/*
canvascoverl:随机生成占位块canvas的x轴位置
startdownx://鼠标按下时x轴位置
smartcanvasbl: 可移动canvas的left初始值
slidermaxrange：slider可移动的最大距离
*/
//生成canvas图案
function creatcanvas(){
//重置初始值
canvascoverl=0;startdownx=0;smartcanvasbl=0;
slider.style.left = slidercover.style.width = 0;
var l= 40, //滑块的正方形边长，不包括小圆点
r = 10, //小圆点半径
pi = math.pi,
sliderw=l+2*r, //滑块边长
rand=canvassize(sliderw,r), //获取随机生成的x,y,left值
x = canvascoverl= rand.x, //占位块x轴
y = rand.y; //占位块y轴
smartcanvasbl=rand.left;
//先清空画布
bcxt.clearrect(0, 0, obj.w, obj.h)
scxt.clearrect(0, 0, obj.w, obj.h)
smartcanvas.width=obj.w;
var srcindex=math.floor(math.random()*(obj.imgarr.length-1));
img.src=obj.imgarr[srcindex];
draw(scxt,x,y,l,r,pi,'clip');
draw(bcxt,x,y,l,r,pi,'fill');
img.onload = function() { //一定要在onload里调用，否则canvas里不能放进图片
bcxt.drawimage(img,0,0,obj.w,obj.h);
scxt.drawimage(img,0,0,obj.w,obj.h);
//裁剪滑块长度
var imagedata = scxt.getimagedata(x, y-2*r, sliderw, sliderw)
smartcanvas.width = sliderw;
smartcanvas.style.left=rand.left+"px";
scxt.putimagedata(imagedata, 0, y-2*r)
}
obj.refresh && obj.refresh();
}
//随机生成canvas滑块和占位块，到左边的距离和到顶部的距离
function canvassize(cw,r){
// cw为占位块和的宽度，r为绘制圆点的半径
var random =math.random();
var x=math.floor(obj.w/2 + random*(obj.w/2 - cw)); //x为占位块x坐标位置，保证占位块始终在画布的右半区域
var y=math.floor(r*2+random*(obj.h - cw - r*2)); //y为占位块y坐标位置,（值至少为小圆半径的2倍才能完全显示，因为绘制的原点是小正方形的左上角）
var left =math.floor(random*(obj.w/2 - cw)); //canvas滑块的left值，这里的值范围保证它始终在画布的左半区域
return {x:x,y:y,left:left}
}
//绘制canvas滑块和占位块
function draw(ctx,x,y,l,r,pi,operation) {
ctx.beginpath()
ctx.moveto(x, y)
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * pi, 2.26 * pi)
ctx.lineto(x + l, y)
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * pi, 2.78 * pi)
ctx.lineto(x + l, y + l)
ctx.lineto(x, y + l)
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * pi, 1.24 * pi, true)
ctx.lineto(x, y)
ctx.linewidth = 1
ctx.fillstyle = 'rgba(200, 200, 200, 1)'
ctx.strokestyle = 'rgba(255, 255, 255, 0.7)'
ctx.stroke()
ctx[operation]()
ctx.globalcompositeoperation = 'destination-over'
}
//滑块被按下
function movestart(e){
var ev = e || window.event;
startdownx = ev.touches!=undefined? ev.touches[0].clientx : ev.clientx;
}
//滑块移动
function moveprocess(e){
var ev = e || window.event,downx = (ev.touches!=undefined)? ev.touches[0].clientx : (startdownx!=0? ev.clientx : 0),range=downx-startdownx;
console.log(downx)
var sliderrange= range<=0? 0 : (range<slidermaxrange ? range : slidermaxrange);
slider.style.left=sliderrange+"px";
slidercover.style.width=obj.sliderw/2 + sliderrange +"px";
smartcanvas.style.left=smartcanvasbl+sliderrange+"px";
}
//停止滑动
function moveend(e){
var ev = e || window.event;
ev.touches!=undefined? slider.ontouchmove=null : slider.onmousemove=null;
var smartcanvasl= parseint(smartcanvas.style.left);
if(math.abs(canvascoverl - smartcanvasl) < obj.range){
obj.finish && obj.finish(true);
}else{
obj.finish && obj.finish(false);
var timer = null,step = 10;
var sliderl = parseint(slider.style.left)
timer = setinterval(function () {
sliderl -= step;
step += 5;
if (sliderl <= 0) {
clearinterval(timer);
sliderl = 0;
slider.style.left = slidercover.style.width = 0;
smartcanvas.style.left = smartcanvasbl + "px"
}
slider.style.left = sliderl + "px";
slidercover.style.width = sliderl+obj.sliderw/2 +"px";
smartcanvas.style.left = sliderl + smartcanvasbl+ "px";
}, 20)
}
}
//事件调用
creatcanvas();
refreshdom.onclick=refreshdom.ontouchstart=creatcanvas;
slider.ontouchstart=function(){
movestart();
this.ontouchmove=moveprocess;
this.ontouchend=moveend;
};
slider.onmousedown=function(){
movestart();
this.onmousemove=moveprocess;
this.onmouseup=moveend;
};
}
window.$newslider=slider
})()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 联想天逸310笔记本怎么拆机更换内存?