js+cavans实现图片滑块验证

2024-08-22 01:10:09

本文实例为大家分享了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
})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现滑动滑块验证登录

本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下 1.html代码 <div class="box">  <a href="#" rel="external nofollow" ><div class="btn">>></div></a>  <p class=
上传的js验证(图片/文件的扩展名)

js 验证上传图片复制代码代码如下: var ImgObj=new Image();//建立一个图像对象 varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg//全局变量图片相关属性 //以下为限制变量 var AllowExt=""; //允许上传的文件类型ŀ为无限制每个
Javascript 验证上传图片大小[客户端]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
原生JS封装拖动验证滑块的实现代码示例

前言星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果分析看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM
Node.JS用纯JavaScript生成图片或滑块式验证码功能

有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图代码文件截图代码实现 html文件 <!DOCTYPE
基于JS组件实现拖动滑块验证功能(代码分享)

拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
node.js WEB开发中图片验证码的实现方法

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿
javascript实现支付宝滑块验证码效果

支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果和修复 JS BUG 等问题.大家直接粘贴代码到对应的文件

js+cavans实现图片滑块验证

相关推荐

随机推荐