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 相关文章推荐
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
php5.2.0内存管理改进
2007/01/22 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php简单防盗链实现方法
2015/07/29 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python实现求最长回文子串长度
2018/01/22 Python
python 读入多行数据的实例
2018/04/19 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
如何理解Python中的变量
2020/06/01 Python
C#面试题
2016/05/06 面试题
How TDD works
2012/09/30 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
高三英语教学计划
2015/01/23 职场文书
户外拓展训练感想
2015/08/07 职场文书
幼儿园国培研修日志
2015/11/13 职场文书