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 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
JS实现瀑布流布局
Oct 21 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
javascript的事件描述
2006/09/08 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python快速排序代码实例
2013/11/21 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
python3访问字典里的值实例方法
2020/11/18 Python
python自动化发送邮件实例讲解
2021/01/04 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
中学生校园广播稿
2014/01/16 职场文书
挂牌仪式主持词
2014/03/20 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
新闻稿标题
2015/07/18 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Ajax异步刷新功能及简单案例
2021/11/20 Javascript