js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码，供大家参考，具体内容如下
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"> <link rel="stylesheet" href="./index.css" > <title>Document</title> </head> <body> <div class="container"> <canvas width="310" height="155" id="canvas"></canvas> <canvas width="310" height="155" id="block"></canvas> <div class="refreshIcon"></div> <div class="bar"> <div id="bar-mask"> <div class="verSliderBlock"></div> </div> <span id="slide">向右滑动验证</span> </div> </div> <script src="./index.js"></script> </body>
css:
*{
margin: 0;
padding: 0;
}
body {
background-color: #E8E8E8;
}
.container{
position: relative;
}
#canva{
background: indianred;
}
#block{
position: absolute;
left: 0px;
}
.refreshIcon{
position: absolute;
left: 280px;
top: 5px;
width: 21px;
height: 20px;
cursor: pointer;
background: url(./refresh.png);
display: block;
}
.verSliderBlock{
height: 40px;
width: 40px;
background-color: #fff;
background:url('./right_arrow.png');
background-size:100%;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
cursor: pointer;
position: absolute;
text-align: center;
line-height: 40px;
color: #45494c;
font-size: 25px;
font-weight: 400;
}
.bar{
position: relative;
text-align: center;
width: 310px;
height: 40px;
line-height: 40px;
margin-top: 15px;
background: #f7f9fa;
color: #45494c;
border: 1px solid #e4e7eb;
display: block;
}
#bar-mask{
position: absolute;
left: 0;
top: 0;
height: 40px;
border: 0 solid #1991fa;
background: #d1e9fe;
}
js:
(function(window){
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')
var refresh = document.querySelector('.refreshIcon')
var x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
w = 42,
l = 42,
r = 10,
PI = Math.PI
console.log(x,y)
//获取图片后面的随机号码
function getRandomNumberByRange(start, end) {
return Math.round(Math.random() * (end - start) + start)
}
//初始化图片
function initImg(){
img.onload = function () {
canvas_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)
};
img.crossOrigin = "Anonymous"
img.src = 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
}
//清除tupian
function clean(){
x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
console.log(x,y)
canvas_ctx.clearRect(0, 0, 310, 155);
block_ctx.clearRect(0, 0, 310, 155)
block.width = 310
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
}
//绘制方块
function draw(ctx, 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 = 2
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
ctx.stroke()
ctx[operation]()
ctx.globalCompositeOperation = 'overlay'
}
initImg()
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
//添加移动事件
var block_slider = document.querySelector("#block");
var slider = document.querySelector(".verSliderBlock");
var slider_mark = document.querySelector("#bar-mask");
//用于判断当前是否是在按住滑块的情况下
var yd = false
var moveX = 0
var downX = 0
//鼠标按下
slider.onmousedown = function (e) {
downX = e.clientX;
yd = true
}
//鼠标移动事件
function hadleMousemove(e) {
if (yd) {
moveX = e.clientX - downX;
document.querySelector('#slide').innerHTML = ''
if (moveX >= 310) {
moveX = 310 - 40
}
if (moveX > -2) {
slider.style.backgroundColor = "#1991FA";
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#1991fa"
slider_mark.style.width = moveX + 40 + "px";
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
slider.style.left = moveX + "px";
}
}
}
//鼠标抬起事件
function hadleMouseup(e) {
if (yd) {
slider.onmousemove = null;
console.log(moveX)
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
slider.style.background = "url('./success.png')";
slider.style.backgroundSize = '100%'
// alert('验证成功')
setTimeout(() => {
rest();
}, 1000)
} else {
slider_mark.style.backgroundColor = "#fce1e1"
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#f57a7a"
slider.style.backgroundColor = "#f57a7a";
slider.style.background = "url('./fail.png')";
slider.style.backgroundSize = '100%'
setTimeout(() => {
rest();
}, 1000)
}
yd = false
}
}
//鼠标在按住滑块下移动
slider.onmousemove = function (e) {
hadleMousemove(e)
}
//鼠标在滑块下抬起
slider.onmouseup = function (e) {
hadleMouseup(e)
}
//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动
document.addEventListener('mousemove', function (e) {
hadleMousemove(e)
})
document.addEventListener('mouseup', function (e) {
hadleMouseup(e)
})
function rest() {
clean()
document.querySelector('#slide').innerHTML = '向右滑动验证'
slider.style.backgroundColor = "#fff";
slider.style.left = "0px"
slider.style.background = "url('./right_arrow.png')";
slider.style.backgroundSize = '100%'
block_slider.style.left = "0px"
slider_mark.style.width = "0px"
slider_mark.style.backgroundColor = "#d1e9fe"
slider_mark.style.borderWidth = "0px"
slider_mark.style.borderColor = "#d1e9fe"
initImg()
}
//刷新
refresh.onclick = function(){
rest()
}
}(window))
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes
-
JS实现滑动拼图验证功能完整示例
本文实例讲述了JS实现滑动拼图验证功能.分享给大家供大家参考,具体如下: 先看一下效果图: 设置画布滑块属性 const l = 42, // 滑块边长 r = 10, // 滑块半径 w = 310, // canvas宽度 h = 155, // canvas高度 PI = Math.PI const L = l + r * 2 // 滑块实际边长 设置背景图片: 图片链接地址可以自行更换 function getRandomImg() { return 'https://picsum.ph
-
js+canvas实现滑动拼图验证码功能
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q
-
使用 Node.js 模拟滑动拼图验证码操作的示例代码
近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu
-
js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
C#滑动验证码拼图验证功能实现(SlideCaptcha)
目录 使用背景: 实现分析: 后端代码: 准备: 使用: 前端代码: 结语: 使用背景: 关于滑动验证码的使用场所还是非常多的,如:调取短信接口之前,和 注册请求之前 或者 频繁会调用的接口都需要加这个拼图验证.这里先上一下效果图吧(心中无码,自然高清). 话不多说,开撸! 实现分析: 滑动验证码的逻辑也很简单.大概说一下: 1,服务器生成主图+附图(从主图裁剪下来的不需要管y坐标)并且存储X坐标: 2,前端传入本地X坐标到服务器. 3,服务器进行计算存储X坐标和本地X坐标相差值: 4,验证相差
-
js实现移动端图片滑块验证功能
之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canvas实现,兼容pc,ie9和移动,js+cavans实现图片滑块验证) 老样子,还是先看效果 原理和上篇uniapp的滑块一样,不一样的是这里是纯js实现,代码是全部是自己写的,有不清楚的可以留言. 下面是全部代码: html: <!DOCTYPE html> <html lang=&quo
-
js+java实现登录滑动图片验证
最新需要公司要求在不改变原来的登录逻辑的情况下,将原来的验证码登录的形式改成滑动图片的形式!下面是做出来的效果: 实现思路:所有的图片数据,验证全部由后端来做.前端调用接口,后端会返回两张经过base64加密的图片信息,分别是背景图片和滑块图片,前端滑动滑块以后将X方向的滑动距离传回后端做验证,验证成功以后再做后续的登录逻辑验证,以下是完整的过程: 获取背景图,我这边是在FTP上放了10张图片,随机获取一张. @LogAnnotation(description = "web获取滑动图片信息&q
-
js+cavans实现图片滑块验证
本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下 js已封装好,拿来即用,兼容pc端和移动端, 效果: 移动端: pc端: 原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了canvas实现,又兼容了pc端,直接拿代码就能用了. 代码:html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
Js逆向实现滑动验证码图片还原的示例代码
本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的 那你应该会想到,那段
-
原生js实现简单滑动解锁功能 js实现滑动拼图解锁
本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
-
vue实现登录滑动拼图验证
本文实例为大家分享了vue实现登录滑动拼图验证的具体代码,供大家参考,具体内容如下 一.安装插件 npm install --save vue-monoplasty-slide-verify 二.main.js引入 import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码 Vue.use(SlideVerify) 三.组件中使用 html(自定义关闭按钮,添加变量控制弹窗显隐) <!-- 拼图验证