效果图:

具体代码:

test.vue

//整个页面是个弹窗 visible 控制弹窗的显示关闭 默认打开

<template>
<div class="mask_layer_model" v-if="visible" style="z-index: 9;">
<div class="captcha_model">
<div class="header">
<span>请完成安全验证</span>
<span style="float: right" title="关闭验证码" @click="close">
<i class="iconfont icon-Close"></i>
</span>
</div>
<div class="content">
<div class="sliding-pictures">
<i class="iconfont icon-shuaxin" @click="onRefresh" title="刷新验证码"></i>
<div id="captcha"> </div>
</div>
</div>
<div class="sliderContainer">
<div class="sliderMask">
<div class="slider">
<span class="sliderIcon"></span>
</div>
</div>
<span class="sliderText">向右滑动填充拼图</span>
</div>
</div> </div>
</template> <script> import './captcha.scss' export default {
data() {
return {
visible: true,
cv:{
w:310,
h:155,
},
block:{
l:42, // 滑块边长
L:42+9*2+3,// 滑块实际边长
r:9, // 滑块半径
},
randomPos:{
x:0,
y:0,
},
canvasCtx:null,
blockCtx:null,
blockDom:null,
sliderDom:null,
sliderContainerDom:null,
sliderMaskDom:null,
el:null,
img:null,
trail:null, };
},
watch: { },
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
this.init();
},
methods: {
close(){
this.visible = false
},
init(){
this.canvasInit();
this.initImg();
this.bindEvents();
},
onRefresh(){
this.reset()
},
onSuccess(){
this.$msg.success("登录成功!");
},
onFail(){
this.$msg.warning("再试一次!");
},
bindEvents () {
this.el.onselectstart = () => false let originX, originY, trail = [], isMouseDown = false const addClass = function (tag, className) {
tag.classList.add(className)
} const removeClass = function (tag, className) {
tag.classList.remove(className)
} const handleDragStart = function (e) {
originX = e.clientX || e.touches[0].clientX
originY = e.clientY || e.touches[0].clientY
isMouseDown = true
console.log(originX)
} const handleDragMove = (e) => {
if (!isMouseDown) return false
const eventX = e.clientX || e.touches[0].clientX
const eventY = e.clientY || e.touches[0].clientY
const moveX = eventX - originX
const moveY = eventY - originY
if (moveX < 0 || moveX + 38 >= this.cv.w) return false
this.sliderDom.style.left = moveX + 'px'
const blockLeft = (this.cv.w - 40 - 20) / (this.cv.w - 40) * moveX
this.blockDom.style.left = blockLeft + 'px' addClass(this.sliderContainerDom, 'sliderContainer_active')
this.sliderMaskDom.style.width = moveX + 'px'
trail.push(moveY)
} const handleDragEnd = (e) => {
if (!isMouseDown) return false
isMouseDown = false
const eventX = e.clientX || e.changedTouches[0].clientX
if (eventX == originX) return false
removeClass(this.sliderContainerDom, 'sliderContainer_active')
this.trail = trail
const { spliced, verified } = this.verify()
if (spliced) {
if (verified) {
addClass(this.sliderContainerDom, 'sliderContainer_success')
this.onSuccess();
} else {
addClass(this.sliderContainerDom, 'sliderContainer_fail')
this.onFail();
this.reset()
}
} else {
addClass(this.sliderContainerDom, 'sliderContainer_fail')
this.onFail();
setTimeout(() => {
this.reset()
}, 1000)
}
}
this.sliderDom.addEventListener('mousedown', handleDragStart)
this.sliderDom.addEventListener('touchstart', handleDragStart)
this.blockDom.addEventListener('mousedown', handleDragStart)
this.blockDom.addEventListener('touchstart', handleDragStart)
document.addEventListener('mousemove', handleDragMove)
document.addEventListener('touchmove', handleDragMove)
document.addEventListener('mouseup', handleDragEnd)
document.addEventListener('touchend', handleDragEnd)
},
verify () {
const sum = function (x, y) {
return x + y
}
const square = function (x) {
return x * x
} const arr = this.trail // 拖动时y轴的移动距离
const average = arr.reduce(sum) / arr.length
const deviations = arr.map(x => x - average)
const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length)
const left = parseInt(this.blockDom.style.left)
return {
spliced: Math.abs(left - this.randomPos.x) < 10,
verified: stddev !== 0, // 简单验证下拖动轨迹,为零时表示Y轴上下没有波动,可能非人为操作
}
},
reset () {
this.sliderContainerDom.className = 'sliderContainer'
this.sliderDom.style.left = 0
this.blockDom.style.left = 0
this.sliderMaskDom.style.width = 0
this.clean()
this.img.setSrc(this.getRandomImgSrc())
},
clean () {
this.canvasCtx.clearRect(0, 0, this.cv.w, this.cv.h)
this.blockCtx.clearRect(0, 0, this.cv.w, this.cv.h)
this.blockDom.width = this.cv.w
},
draw () {
// 随机创建滑块的位置
this.randomPos.x = this.getRandomNumberByRange(this.block.L + 10, this.cv.w - (this.block.L + 10))
this.randomPos.y = this.getRandomNumberByRange(10 + this.block.r * 2, this.cv.h - (this.block.L + 10))
this.drawBlock(this.canvasCtx, this.randomPos.x, this.randomPos.y, 'fill')
this.drawBlock(this.blockCtx, this.randomPos.x, this.randomPos.y, 'clip')
},
drawBlock(ctx, x, y, operation) {
let r = this.block.r,
l = this.block.l,
PI = Math.PI; 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 = 2
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
ctx.stroke()
ctx[operation]()
ctx.globalCompositeOperation = 'destination-over'
},
initImg(){
const img = this.createImg(() => {
this.draw()
this.canvasCtx.drawImage(img, 0, 0, this.cv.w, this.cv.h)
this.blockCtx.drawImage(img, 0, 0, this.cv.w, this.cv.h)
const y = this.randomPos.y - this.block.r * 2 - 1;
const ImageData = this.blockCtx.getImageData(this.randomPos.x - 3, y, this.block.L, this.block.L)
this.blockDom.width = this.block.L
this.blockCtx.putImageData(ImageData, 0, y)
})
this.img = img
},
canvasInit(){
const canvas = this.createCanvas(this.cv.w, this.cv.h) // 画布
const block = canvas.cloneNode(true) // 滑块 block.className = 'block'
const el = this.el = document.getElementById('captcha');
el.style.position = 'relative'
el.style.width = this.cv.w + 'px'
Object.assign(el.style, {
position: 'relative',
width: this.cv.w + 'px',
margin: '0 auto'
}) this.el = el
el.appendChild(canvas)
el.appendChild(block) this.canvasCtx = canvas.getContext("2d");
this.blockCtx = block.getContext("2d");
this.blockDom=block;
this.sliderDom=document.getElementsByClassName('slider')[0];
this.sliderContainerDom=document.getElementsByClassName('sliderContainer')[0];
this.sliderMaskDom=document.getElementsByClassName('sliderMask')[0];
console.log(this.sliderDom)
},
createCanvas (width, height) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
return canvas
},
createImg (onload) {
const img = new Image()
img.crossOrigin = "Anonymous"
img.onload = onload
img.onerror = () => {
img.setSrc(this.getRandomImgSrc())
} img.setSrc = (src) =>{
if (window.navigator.userAgent.indexOf('Trident') > -1) { // IE浏览器无法通过img.crossOrigin跨域,使用ajax获取图片blob然后转为dataURL显示
const xhr = new XMLHttpRequest()
xhr.onloadend = (e) =>{
const file = new FileReader() // FileReader仅支持IE10+
file.readAsDataURL(e.target.response)
file.onloadend = function (e) {
img.src = e.target.result
}
}
xhr.open('GET', src)
xhr.responseType = 'blob'
xhr.send()
}
else img.src = src
}
img.setSrc(this.getRandomImgSrc())
return img
}, getRandomNumberByRange (start, end) {
return Math.round(Math.random() * (end - start) + start)
},
getRandomImgSrc () {
return 'https://picsum.photos/300/150/?image=' + this.getRandomNumberByRange(0, 1084)
// return 'https://picsum.photos/id/407/300/150'
},
}
};
</script>

captcha.scss

.block {
position: absolute;
left: 0;
top: 0;
cursor: pointer;
cursor: grab;
} .block:active {
cursor: pointer;
cursor: grabbing;
} .sliderContainer {
position: relative;
text-align: center;
width: 310px;
height: 40px;
line-height: 40px;
margin-top: 15px;
background: #f7f9fa;
color: #45494c;
border: 1px solid #e4e7eb;
margin-left: 4%;
} .sliderContainer_active .slider {
height: 38px;
top: -1px;
border: 1px solid #1991FA;
} .sliderContainer_active .sliderMask {
height: 38px;
border-width: 1px;
} .sliderContainer_success .slider {
height: 38px;
top: -1px;
margin-left: -1px;
border: 1px solid #52CCBA;
background-color: #52CCBA !important;
} .sliderContainer_success .sliderMask {
height: 38px;
border: 1px solid #52CCBA;
background-color: #D2F4EF;
} .sliderContainer_success .sliderIcon {
background-position: 0 0 !important;
} .sliderContainer_fail .slider {
height: 38px;
top: -1px;
border: 1px solid #f57a7a;
background-color: #f57a7a !important;
} .sliderContainer_fail .sliderMask {
height: 38px;
border: 1px solid #f57a7a;
background-color: #fce1e1;
} .sliderContainer_fail .sliderIcon {
top: 14px;
background-position: 0 -82px !important;
}
.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
display: none;
} .sliderMask {
position: absolute;
left: 0;
top: 0;
height: 40px;
border: 0 solid #1991FA;
background: #D1E9FE;
} .slider {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
transition: background .2s linear;
cursor: pointer;
cursor: grab;
} .slider:active {
cursor: grabbing;
} .slider:hover {
background: #1991FA;
} .slider:hover .sliderIcon {
background-position: 0 -13px;
} .sliderIcon {
position: absolute;
top: 15px;
left: 13px;
width: 14px;
height: 12px;
background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -26px;
background-size: 34px 471px;
} .refreshIcon {
position: absolute;
right: 0;
top: 0;
width: 34px;
height: 34px;
cursor: pointer;
background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -437px;
background-size: 34px 471px;
} .captcha_model{
background-color: white;
margin-left: 5%;
margin-right: 5%;
.header{
font-size: .18rem;
padding: 2% 5%;
border-bottom: 1px solid #ccc;
}
.content{
padding-top: .1rem;
.sliding-pictures{
position: relative;
i{
position: absolute;
right: 7%;
z-index: 9;
font-size: .22rem;
}
}
}
} .mask_layer_model{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
font-size: .13rem;
}

vue 弹窗式 滑动图片验证码的更多相关文章

  1. VUE 图片验证码

    1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <templat ...

  2. Django与Vue交互,实现注册的图片验证码没有加载的原因

    注册功能之图片验证码: 1.实现过程: 传递uuid给后端,再发送图片验证码的请求给后端,后端存储uuid并生成图片验证码保存到redis,然后将图片验证码返回给前端. 当用户输入图片验证码的时候,前 ...

  3. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

  4. js实现滑动拼图验证码

    js实现滑动拼图验证码,我这个样式是仿那些大网站做了, 学习用的,只用到前端. 小的个人网站感觉还可以用,大一点的别人用机器一下就破解了. 下面看图示: 样子大概是这样的. 源码在这 百度网盘:    ...

  5. SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能

    随着近几年技术的发展,人们对于系统安全性和用户体验的要求越来越高,大多数网站系统都逐渐采用行为验证码来代替图片验证码.GitEgg-Cloud集成了开源行为验证码组件和图片验证码,并在系统中添加可配置 ...

  6. 原生js+canvas实现滑动拼图验证码

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

  7. 使用.Net Core 2.1开发Captcha图片验证码服务

    更新后续篇:Captcha服务(后续1) 使用.Net Core 2.1开发Captcha验证码服务 开发工具:Visual Studio 2017 15.7.3 开发平台:64位 Windows 1 ...

  8. Spring Security构建Rest服务-0800-Spring Security图片验证码

    验证码逻辑 以前在项目中也做过验证码,生成验证码的代码网上有很多,也有一些第三方的jar包也可以生成漂亮的验证码.验证码逻辑很简单,就是在登录页放一个image标签,src指向一个controller ...

  9. 使用jquery完成定时弹出广告图片

    <script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...

随机推荐

  1. BPM业务流程管理系统_K2受邀出席QAD客户日活动,赋能企业云端智造_工作流引擎

    10月17日,K2受邀参加由厦门易维主办的以“走进QAD云ERP,深耕智能制造”为主题的QAD客户日活动.本次大会是以工业4.0背景下传统制造业面临巨大压力和挑战为导向,旨在探讨如何助力企业迅速适应业 ...

  2. FreeRTOS 任务创建和删除(静态)

    #define configSUPPORT_STATIC_ALLOCATION 1 //打开静态方法 StackType_t TaskStackBuffer[50]; //任务堆栈大小 StaticT ...

  3. laravel模型关联评论

    用户模型 public function show(Post $post,LogManager $log){ $post->load("comments"); //这种方式是 ...

  4. vbox 网络配置

    vagrant主机与虚拟机通讯网络有两种模式: config.vm.network "private_network", ip: "192.168.33.10" ...

  5. Formal Analysis of the TLS Handshake Protocol -----论文整理

    1.关键词  TLS.SSL.Formal Analsysis  Conridentiality  Secerecy 2.Table  THE SSL/TLS handshake Protocol 3 ...

  6. 利用shell命令分析服务器日志

      在没有专业日志分析系统的情况下,我们有时需要对日志进行简单的分析,下面列出一些常用的shell命令分析日志的方法,一定要收藏 1.查看有多少个ip访问 awk '{print $1}' log_f ...

  7. 读入 并查集 gcd/exgcd 高精度 快速幂

    ios_base::sync_with_stdio(); cin.tie(); ], nxt[MAXM << ], Head[MAXN], ed = ; inline void added ...

  8. python中IO多路复用、协程

    一.IO多路复用 IO多路复用:检测多个socket是否已经发生变化(是否已经连接成功/是否已经获取数据)(可读/可写) import socket def get_data(key): client ...

  9. mybatis3.0-[topic10-14] -全局配置文件_plugins插件简介/ typeHandlers_类型处理器简介 /enviroments_运行环境 /多数据库支持/mappers_sql映射注册

    mybatis3.0-全局配置文件_   下面为中文官网解释 全局配置文件的标签需要按如下定义的顺序: <!ELEMENT configuration (properties?, setting ...

  10. Spring Boot源码探索——自动配置的内部实现

    前面写了两篇文章 <Spring Boot自动配置的魔法是怎么实现的>和 <Spring Boot起步依赖:定制starter>,分别分析了Spring Boot的自动配置和起 ...