js+cavans实现图片滑块验证
程序员文章站
2022-03-27 13:57:30
本文实例为大家分享了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 })()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。