js+cavans实现图片滑块验证

JS+Canvas实现图片滑块验证攻略

简介

图片滑块验证是用于防止机器人恶意攻击的常用验证方式之一。它要求用户将拼图滑块拖动到指定位置，以证明用户不是机器人，从而进行下一步操作。在这里，我们使用JS和Canvas技术来实现图片滑块验证的效果。

思路分析

1. 绘制背景图和滑块。
2. 鼠标按下时，获取鼠标位置与滑块左上角的距离，便于后续计算滑块位置。
3. 鼠标移动时，计算滑块的位置，并不断更新滑块的位置。
4. 鼠标松开时，判断滑块是否到达指定位置。
5. 如果到达指定位置，则验证通过，否则验证失败，重新绘制滑块。

代码实现

下面我们来看一个简单的实现代码，以更好地理解实现思路。

第一步：HTML代码

<div class="wrapper">
  <canvas id="canvas" width="310" height="155"></canvas>
  <div class="slider" id="slider">
    <img src="slider.png" alt="拖动滑块进行验证">
  </div>
</div>

第二步：CSS样式

在CSS样式中，我们主要设置背景图的位置和滑块的样式。

.wrapper {
  position: relative;
  width: 310px;
  height: 155px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f5f5f5;
  background-position: center;
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.slider {
  position: absolute;
  left: 2px;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select:none;
  z-index: 10;
}

第三步：JS实现

var canvas = document.getElementById('canvas'),//获取canvas
    ctx = canvas.getContext('2d'),//获取上下文
    w = canvas.width,//定义宽高
    h = canvas.height;

//绘制背景图
var bg = new Image();
bg.src = 'bg.jpg';
bg.onload = function() {
    ctx.drawImage(bg, 0, 0, w, h);
}

//绘制滑块
var slider = document.getElementById('slider');
var sliderImg = new Image();
sliderImg.src = 'slider.png';
sliderImg.onload = function() {
    ctx.drawImage(sliderImg, 0, 0, 50, 50);
}

//滑块事件监听
var x = 0, y = 0, dx = 0, dy = 0, isDown = false, isOk = false;
window.addEventListener('mousedown', function(e) {
    if (isDown) return;
    isDown = true;
    x = e.offsetX;
    y = e.offsetY;
}, false);
window.addEventListener('mousemove', function(e) {
    if (!isDown) return;
    dx = e.offsetX - x;
    dy = e.offsetY - y;

    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(bg, 0, 0, w, h);
    ctx.drawImage(sliderImg, dx, 0, 50, 50);

    if (dx > 260) {
        isOk = true;
        slider.textContent = '验证通过';
        slider.style.backgroundColor = "lightgreen";
        slider.style.left = "260px";
        slider.style.transition = "all .3s";
        window.removeEventListener('mousemove', arguments.callee, false);
        window.removeEventListener('mouseup', arguments.callee, false);
        return;
    }
}, false);
window.addEventListener('mouseup', function(e) {
    if (!isDown) return;
    isDown = false;
    if (isOk) {
        return;
    } else {
        slider.style.backgroundColor = "#fff";
        slider.style.left = "2px";
        slider.style.transition = "all .3s";
        dx = 0;
        dy = 0;
    }
}, false);

示例说明

案例1: 使用JS+Canvas实现图片滑块验证

案例2: 拖拽验证码

以上示例均使用了JS和Canvas来实现图片滑块验证。通过查看源码和实现过程，可以更好地理解如何使用JS和Canvas技术来实现这一效果。