js+canvas实现滑动拼图验证码功能


Posted in Javascript onMarch 26, 2018

js+canvas实现滑动拼图验证码功能 

上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的。我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。

首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。

<canvas width="310" height="155" id="canvas"></canvas>
<canvas width="310" height="155" id="block"></canvas>
var canvas = document.getElementById('canvas')
 var block = document.getElementById('block')
 var canvas_ctx = canvas.getContext('2d')
 var block_ctx = block.getContext('2d')
 var img = document.createElement('img')
 img.onload = function() {
  canvas_ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
 };
 img.src = 'img.jpg'

js+canvas实现滑动拼图验证码功能 

下面考虑如何裁剪出拼图的形状,拼图形状比较复杂,首先我们画一个正方形,接着上边的代码写:

var x = 150, y = 40, w = 42, r = 10, PI = Math.PI 
 function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x + w, y)
  ctx.lineTo(x + w, y + w)
  ctx.lineTo(x, y + w)
  ctx.clip()
 }
 draw(canvas_ctx)
 draw(block_ctx)

x,y为正方形左上角的坐标,现在先随便写后边生成的时候用随机数,w为正方形的边长,r为后边画缺口的圆的半径。我们先把绘图过程用函数封装起来,方便后面同时操作背景和滑块。用clip()方法裁剪图片后生成一个正方形。

js+canvas实现滑动拼图验证码功能 

接下来画正方形上边和右边的圆形:

function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x,y)
+  ctx.lineTo(x+w/2,y)
+  ctx.arc(x+w/2,y-r+2, r,0,2*PI) //
+  ctx.lineTo(x+w/2,y)
  ctx.lineTo(x+w,y)
+  ctx.lineTo(x+w,y+w/2)
+  ctx.arc(x+w+r-2,y+w/2,r,0,2*PI) //
+  ctx.lineTo(x+w,y+w/2)
  ctx.lineTo(x+w,y+w)
  ctx.lineTo(x,y+w)
  ctx.lineTo(x,y)
  ctx.clip()
 }

js+canvas实现滑动拼图验证码功能 

两处注释的位置将圆心往内偏移了2px,实现缺口的样式。然后是左边空心的部分,由于clip是裁剪路径内的部分,因此直接像上面画圆是不行的,我们开启一条新的路径,然后画圆将这个正方形“遮盖”出一个缺口,这里会用到 globalCompositeOperation 属性,'xor'顾名思义。代码接上边:

function draw(ctx) {
  ctx.beginPath()
  ...
  ctx.lineTo(x,y)
  ctx.clip()
+  ctx.beginPath()
+  ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行,方便背景图片的裁剪
+  ctx.globalCompositeOperation = "xor"
+  ctx.fill()
}

js+canvas实现滑动拼图验证码功能 

现在一个基本的拼图形状有了,我们调整#block的大小,并将裁剪出来的滑块放入#block中:

img.onload = function() {
  ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
+  var blockWidth = w + r * 2
+  var _y = y - r * 2 + 2 // 滑块实际的y坐标
+  var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
+  block.width = blockWidth
+  block_ctx.putImageData(ImageData, 0, _y)
 }

js+canvas实现滑动拼图验证码功能 

现在我们需要把左边画布展示原来的图片,并且抠掉中间滑块的部分,这里画路径的过程都是一样的,唯一不同只是clip()那里改成fill()即可实现效果,我们前面已经把画路径的过程封装成函数了,稍作改动即可:

- function draw(ctx) {
+ function draw(ctx, operation) {
  ...
- ctx.clip()
+ ctx.fillStyle = '#fff'
+ ctx[operation]()
  ...
}
+ draw(canvas_ctx, 'fill')
+ draw(block_ctx, 'clip')

js+canvas实现滑动拼图验证码功能 

接下来就是写样式了,略过:

js+canvas实现滑动拼图验证码功能 

然后就是写拖动事件,我们可以在鼠标按下时记录鼠标位置,然后在拖动时给滑块设置left值。最后在松开鼠标时,判断滑块此时的left值和最开始裁剪滑块时的x值,如果在一定范围内就算验证通过,否则验证失败。

最后再加上随机图片和随机剪切位置,基本就ok了。另外可以判断下鼠标移动时y轴的变化,以判断是否是“人”在操作,当然web安全这块神魔乱舞的,我就不班门弄斧了,只是做个简单判断就行。

由于没有给切片边缘加上边框或者阴影,导致某些图片的滑块可识别度不高,需要后边完善下(其实是我还没折腾出来- -),希望懂这块的大神帮我完善下//

js+canvas实现滑动拼图验证码功能 

后边代码比较杂乱,就不贴上来了, 查看完整代码点这里 演示地址 点这里

总结

以上所述是小编给大家介绍的js+canvas实现滑动拼图验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
layui实现动态和静态分页
Apr 28 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
JS从非数组对象转数组的方法小结
Mar 26 #Javascript
深入理解Node module模块
Mar 26 #Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 #Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 #Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 #Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 #Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
You might like
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
php接口隔离原则实例分析
2019/11/11 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
Angular实现响应式表单
2017/08/04 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python判断链表是否有环的实例代码
2020/01/31 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
一年级学生评语大全
2014/04/21 职场文书
批评与自我批评范文
2014/10/15 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
《1942》观后感
2015/06/08 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Go 语言结构实例分析
2021/07/04 Golang
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers