js+cavans实现图片滑块验证


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下

js已封装好,拿来即用,兼容pc端和移动端,

效果:

移动端: 

js+cavans实现图片滑块验证

pc端:

js+cavans实现图片滑块验证

原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了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
})()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
玩转python爬虫之正则表达式
2016/02/17 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python实现从wind导入数据
2019/12/03 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
校园之声广播稿
2014/01/31 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python