JS滑动验证原理

滑动验证考察的知识点：

1 JavaScript事件：

onmousedown：鼠标按下事件

onmousemove：鼠标移动事件

onmouseup：鼠标抬起事件

onMouseLeave：鼠标离开事件

 

2 CSS中 canvas 图片裁剪

效果图：

 代码实现：

import React, { Component } from 'react';
import { Icon, Spin } from 'antd';
import './index.less';
import SlideImgOnePng from '@/assets/images/slide_img_one.png';
import SlideImgTwoPng from '@/assets/images/slide_img_two.png';
import SlideImgThreePng from '@/assets/images/slide_img_three.png';
import SlideImgFourPng from '@/assets/images/slide_img_four.png';
import SlideImgFivePng from '@/assets/images/slide_img_five.png';
import MyIcon from '@/global';
import classNames from 'classnames';

// const canWidth = 345; // 容器宽
// const canHeight = 215; // 容器高
const canWidth = 300; // 容器宽
const canHeight = 160; // 容器高
const canLitWidth = 42; // 图片滑块宽
const canLitR = 10; // 滑块附带小圆半径
const canLitL = canLitWidth + canLitR * 2 + 3; // 小拼图实际边长

// eslint-disable-next-line prefer-destructuring
const PI = Math.PI; // 圆周率

const time = 500; // 延迟时间

class BlockMove extends Component {
  constructor(props) {
    super(props);
    console.log('BlockMove', props);
    this.state = {
      blockX: 0, // 小拼图X轴坐标
      textMess: '向右移动拼接图片,完成验证',
      type: 'process', // 验证状态，false为验证失败，true验证成功
      loading: false, // 加载状态
      canvasRand: '',
      blockRand: '',
      imgPath: '',
      defaultImgList: [
        SlideImgOnePng,
        SlideImgTwoPng,
        SlideImgThreePng,
        SlideImgFourPng,
        SlideImgFivePng,
      ],
      limitEmit: true,
    };

    this.y = 0; // 小拼图达到的Y轴坐标
    this.x = 0; // 小拼图达到的X轴坐标
    this.img = null;
    this.limitEmit = true; // 触发频率
  }

  componentDidMount() {
    this.props.onRef(this);
    this.onMouseDown();
    this.init();
  }

  init = () => {
    this.y = 0;
    this.x = 0;
    this.setState(
      {
        type: 'process',
        blockX: 0,
        textMess: '向右移动拼接图片,完成验证',
        canvasRand: `canvas${this.getRandomNumberByRange(0, 100)}`,
        blockRand: `block${this.getRandomNumberByRange(101, 200)}`,
        limitEmit: true,
      },
      () => {
        this.getImg();
      },
    );
  };

  /**
   * @name onMouseDown
   * @description 监听鼠标点击
   */
  onMouseDown = () => {
    const outBox = document.getElementById('out_mouse_img');
    const mouseBox = document.getElementById('mouse_img');
    const that = this;

    // 鼠标按下操作
    mouseBox.onmousedown = function (ev) {
      console.log(ev);
      const ev00 = ev || window.event;
      const px = ev00.pageX; // 初始位置，对于整个页面来说，光标点击位置
      const oL = this.offsetLeft; // 初始位置，对于有定位的父级，元素边框侧与父级边框侧的距离 初始为0
      console.log(px, oL);

      // 鼠标移动操作
      document.onmousemove = function (evs) {
        console.log(evs);
        if (that.state.type === 'success') {
          mouseBox.onmousedown = null;
          document.onmousemove = null;
          return;
        }
        const ev01 = evs || window.event;
        const px1 = ev01.pageX; // 滑动后，当前鼠标所在位置
        let oL1 = px1 - px + oL; // 距初始位置移动的距离
        if (oL1 <= 0) {
          oL1 = 0;
        } else if (oL1 > outBox.clientWidth - mouseBox.clientWidth) {
          oL1 = outBox.clientWidth - mouseBox.clientWidth;
        }
        that.setState({ blockX: oL1 });
      };

      // 鼠标放开
      document.onmouseup = function () {
        console.log('onmouseup');
        // document.onmousemove = null;
        // document.onmouseup = null;
        that.cancelMove();
      };
    };
  };

  /**
   * @name 验证成功
   * @description 验证成功，信息变化
   */
  validateSuccess = () => {
    const { limitEmit } = this.state;
    console.log(limitEmit);
    if (limitEmit) {
      setTimeout(() => {
        this.props.onSuccess();
      }, time);
    }
    this.setState({
      textMess: '验证成功',
      type: 'success',
      limitEmit: false,
    });
  };

  /**
   * @name 取消滑动
   * @description 鼠标离开滑块，滑块停止滑动并复位
   */
  cancelMove = () => {
    const mouseBox = document.getElementById('mouse_img');
    const mouseLeft = mouseBox.offsetLeft;
    console.log(mouseLeft, this.x);
    document.onmousemove = null;
    document.onmouseup = null;
    if (mouseLeft !== 0) {
      if (mouseLeft === this.x || (mouseLeft <= this.x + 3 && mouseLeft >= this.x - 3)) {
        this.validateSuccess();
      } else {
        console.log('init');
        this.setState({
          type: 'fail',
          textMess: '验证失败',
        });
        setTimeout(() => {
          this.init();
        }, time);
      }
    }
  };

  // 鼠标移开
  onLeaveBlock = () => {
    const mouseBox = document.getElementById('mouse_img');
    const mouseLeft = mouseBox.offsetLeft;
    console.log('onLeaveBlock', mouseLeft, this.x);
    if (mouseLeft !== 0) {
      if (mouseLeft === this.x || (mouseLeft <= this.x + 3 && mouseLeft >= this.x - 3)) {
        document.onmousemove = null;
        document.onmouseup = null;
        this.validateSuccess();
      }
    } else {
      console.log('leaveMouse');
    }
  };

  /**
   * @name getRandomNumberByRange
   * @description 获取随机数
   */
  getRandomNumberByRange = (start, end) => {
    return Math.round(Math.random() * (end - start) + start);
  };

  /**
   * @name getImg
   * @description 获取图片资源
   * @description
   */
  getImg = async () => {
    const { defaultImgList } = this.state;
    const index = Math.floor(Math.random() * defaultImgList.length);
    this.setState(
      {
        imgPath: defaultImgList[index],
      },
      () => {
        this.drawInit();
      },
    );
  };

  /**
   * @name drawInit
   * @description 画图前处理
   */
  drawInit = async () => {
    const { canvasRand, blockRand, imgPath } = this.state;
    const mycanvas = document.getElementById(canvasRand);
    const myblock = document.getElementById(blockRand);
    myblock.width = canWidth; // 等宽获取整个图片
    const canvasCtx = mycanvas.getContext('2d');
    const blockCtx = myblock.getContext('2d');
    // 清空画布
    canvasCtx.clearRect(0, 0, canWidth, canHeight);
    blockCtx.clearRect(0, 0, canWidth, canHeight);
    // 创建小图片滑块
    this.img = document.createElement('img');
    // 随机位置创建拼图形状
    this.x = this.getRandomNumberByRange(canLitL + 10, canWidth - (canLitL + 10));
    this.y = this.getRandomNumberByRange(10 + canLitR * 2, canHeight - (canLitL + 10));
    // console.log(this.x, this.y);

    // 渲染图片
    this.img.onload = async () => {
      canvasCtx.drawImage(this.img, 0, 0, canWidth, canHeight);
      blockCtx.drawImage(this.img, 0, 0, canWidth, canHeight);
      const yAxis = this.y - canLitR * 2 - 1; // 小拼图实际的坐标
      // console.log(yAxis);
      const ImgData = blockCtx.getImageData(this.x - 4, yAxis - 1, canLitL, canLitL);
      myblock.width = canLitL; // 小拼图的宽，隐藏抠图位置图片
      blockCtx.putImageData(ImgData, 0, yAxis);
    };
    this.img.src = imgPath; // 图片路径

    this.draw(canvasCtx, this.x, this.y - 2, canLitWidth, 'fill');
    this.draw(blockCtx, this.x, this.y, canLitWidth, 'clip');
  };

  /**
   * @name draw
   * @description 画图公用方法
   */
  draw = (ctx, x = 0, y = 0, w = 0, operation) => {
    const r = canLitR;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x + w / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
    ctx.lineTo(x + w, y);
    ctx.arc(x + w + r - 2, y + w / 2, r, 1.21 * PI, 2.78 * PI);
    ctx.lineTo(x + w, y + w);
    ctx.lineTo(x, y + w);
    ctx.arc(x + r - 2, y + w / 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.globalCompositeOperation = 'destination-over';

    // eslint-disable-next-line no-unused-expressions
    operation === 'fill' ? ctx.fill() : ctx.clip();
  };

  render() {
    console.log(this.state);
    const { textMess, type, blockX, loading, canvasRand, blockRand } = this.state;
    return (
      <div className="outDiv">
        <Spin spinning={loading}>
          <div className="outDivNext">
            <MyIcon type="icon-refresh" className="my-icon-refresh" onClick={this.init} />
            <canvas id={canvasRand} className="outDivNoborder"></canvas>
            <canvas id={blockRand} className="outDivLitBlock" style={{ left: blockX }}></canvas>
          </div>

          {/** 移动滑块 */}
          <div id="out_mouse_img" className="outBkock" onMouseLeave={this.onLeaveBlock}>
            <div
              id="mouse_img"
              className={classNames('moveBlock', type === 'fail' && 'move-fail-btn')}
              style={{ marginLeft: blockX }}
            >
              {type === 'success' && <MyIcon type="icon-right-arrow" className="icon_check" />}

              {type === 'process' && <MyIcon type="icon-more" className="icon_check" />}

              {type === 'fail' && <MyIcon type="icon-fail" className="icon_check" />}
            </div>

            {/** 默认背景 */}
            <div className="default-btn">
              {type === 'process' && <div>{blockX === 0 && textMess}</div>}
            </div>

            {/** 移动之后背景 */}
            <div
              className={classNames('default-btn move-btn', type === 'fail' && 'fail-btn')}
              style={{  blockX }}
            >
              {type !== 'process' && <div style={{ color: '#fff' }}>{textMess}</div>}
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}
export default BlockMove;

推荐阅读：

网易易盾参考效果图：https://dun.163.com/trial/jigsaw

CSS canvas图片裁剪原理：https://www.cnblogs.com/huanglei-/p/8568405.html

JS实现拖动滑块验证：https://blog.csdn.net/tel13259437538/article/details/79822694