react的滑动图片验证码组件的示例代码

业务需求,需要在系统登陆的时候,使用“滑动图片验证码”,来验证操作的不是机器人。

效果图

使用方式

在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。

class App extends Component {
  state = {
    url: ""
  }

  componentDidMount() {
    this.setState({ url: getImage() })
  }

  onReload = () => {
    this.setState({ url: getImage() })
  }
  render() {
    return (
      <div>
        <ImageCode
          imageUrl={this.state.url}
          onReload={this.onReload}
          onMatch={() => {
            console.log("code is match")
          }}
        />
      </div>
    )
  }
}

上代码

// index.js
/**
 * @name ImageCode
 * @desc 滑动拼图验证
 * @author darcrand
 * @version 2019-02-26
 *
 * @param {String} imageUrl 图片的路径
 * @param {Number} imageWidth 展示图片的宽带
 * @param {Number} imageHeight 展示图片的高带
 * @param {Number} fragmentSize 滑动图片的尺寸
 * @param {Function} onReload 当点击'重新验证'时执行的函数
 * @param {Function} onMath 匹配成功时执行的函数
 * @param {Function} onError 匹配失败时执行的函数
 */

import React from "react"

import "./styles.css"

const icoSuccess = require("./icons/success.png")
const icoError = require("./icons/error.png")
const icoReload = require("./icons/reload.png")
const icoSlider = require("./icons/slider.png")

const STATUS_LOADING = 0 // 还没有图片
const STATUS_READY = 1 // 图片渲染完成,可以开始滑动
const STATUS_MATCH = 2 // 图片位置匹配成功
const STATUS_ERROR = 3 // 图片位置匹配失败

const arrTips = [{ ico: icoSuccess, text: "匹配成功" }, { ico: icoError, text: "匹配失败" }]

// 生成裁剪路径
function createClipPath(ctx, size = 100, styleIndex = 0) {
  const styles = [
    [0, 0, 0, 0],
    [0, 0, 0, 1],
    [0, 0, 1, 0],
    [0, 0, 1, 1],
    [0, 1, 0, 0],
    [0, 1, 0, 1],
    [0, 1, 1, 0],
    [0, 1, 1, 1],
    [1, 0, 0, 0],
    [1, 0, 0, 1],
    [1, 0, 1, 0],
    [1, 0, 1, 1],
    [1, 1, 0, 0],
    [1, 1, 0, 1],
    [1, 1, 1, 0],
    [1, 1, 1, 1]
  ]
  const style = styles[styleIndex]

  const r = 0.1 * size
  ctx.save()
  ctx.beginPath()
  // left
  ctx.moveTo(r, r)
  ctx.lineTo(r, 0.5 * size - r)
  ctx.arc(r, 0.5 * size, r, 1.5 * Math.PI, 0.5 * Math.PI, style[0])
  ctx.lineTo(r, size - r)
  // bottom
  ctx.lineTo(0.5 * size - r, size - r)
  ctx.arc(0.5 * size, size - r, r, Math.PI, 0, style[1])
  ctx.lineTo(size - r, size - r)
  // right
  ctx.lineTo(size - r, 0.5 * size + r)
  ctx.arc(size - r, 0.5 * size, r, 0.5 * Math.PI, 1.5 * Math.PI, style[2])
  ctx.lineTo(size - r, r)
  // top
  ctx.lineTo(0.5 * size + r, r)
  ctx.arc(0.5 * size, r, r, 0, Math.PI, style[3])
  ctx.lineTo(r, r)

  ctx.clip()
  ctx.closePath()
}

class ImageCode extends React.Component {
  static defaultProps = {
    imageUrl: "",
    imageWidth: 500,
    imageHeight: 300,
    fragmentSize: 80,
    onReload: () => {},
    onMatch: () => {},
    onError: () => {}
  }

  state = {
    isMovable: false,
    offsetX: 0, //图片截取的x
    offsetY: 0, //图片截取的y
    startX: 0, // 开始滑动的 x
    oldX: 0,
    currX: 0, // 滑块当前 x,
    status: STATUS_LOADING,
    showTips: false,
    tipsIndex: 0
  }

  componentDidUpdate(prevProps) {
    // 当父组件传入新的图片后,开始渲染
    if (!!this.props.imageUrl && prevProps.imageUrl !== this.props.imageUrl) {
      this.renderImage()
    }
  }

  renderImage = () => {
    // 初始化状态
    this.setState({ status: STATUS_LOADING })

    // 创建一个图片对象,主要用于canvas.context.drawImage()
    const objImage = new Image()

    objImage.addEventListener("load", () => {
      const { imageWidth, imageHeight, fragmentSize } = this.props

      // 先获取两个ctx
      const ctxShadow = this.refs.shadowCanvas.getContext("2d")
      const ctxFragment = this.refs.fragmentCanvas.getContext("2d")

      // 让两个ctx拥有同样的裁剪路径(可滑动小块的轮廓)
      const styleIndex = Math.floor(Math.random() * 16)
      createClipPath(ctxShadow, fragmentSize, styleIndex)
      createClipPath(ctxFragment, fragmentSize, styleIndex)

      // 随机生成裁剪图片的开始坐标
      const clipX = Math.floor(fragmentSize + (imageWidth - 2 * fragmentSize) * Math.random())
      const clipY = Math.floor((imageHeight - fragmentSize) * Math.random())

      // 让小块绘制出被裁剪的部分
      ctxFragment.drawImage(objImage, clipX, clipY, fragmentSize, fragmentSize, 0, 0, fragmentSize, fragmentSize)

      // 让阴影canvas带上阴影效果
      ctxShadow.fillStyle = "rgba(0, 0, 0, 0.5)"
      ctxShadow.fill()

      // 恢复画布状态
      ctxShadow.restore()
      ctxFragment.restore()

      // 设置裁剪小块的位置
      this.setState({ offsetX: clipX, offsetY: clipY })

      // 修改状态
      this.setState({ status: STATUS_READY })
    })

    objImage.src = this.props.imageUrl
  }

  onMoveStart = e => {
    if (this.state.status !== STATUS_READY) {
      return
    }

    // 记录滑动开始时的绝对坐标x
    this.setState({ isMovable: true, startX: e.clientX })
  }

  onMoving = e => {
    if (this.state.status !== STATUS_READY || !this.state.isMovable) {
      return
    }
    const distance = e.clientX - this.state.startX
    let currX = this.state.oldX + distance

    const minX = 0
    const maxX = this.props.imageWidth - this.props.fragmentSize
    currX = currX < minX ? 0 : currX > maxX ? maxX : currX

    this.setState({ currX })
  }

  onMoveEnd = () => {
    if (this.state.status !== STATUS_READY || !this.state.isMovable) {
      return
    }
    // 将旧的固定坐标x更新
    this.setState(pre => ({ isMovable: false, oldX: pre.currX }))

    const isMatch = Math.abs(this.state.currX - this.state.offsetX) < 5
    if (isMatch) {
      this.setState(pre => ({ status: STATUS_MATCH, currX: pre.offsetX }), this.onShowTips)
      this.props.onMatch()
    } else {
      this.setState({ status: STATUS_ERROR }, () => {
        this.onReset()
        this.onShowTips()
      })
      this.props.onError()
    }
  }

  onReset = () => {
    const timer = setTimeout(() => {
      this.setState({ oldX: 0, currX: 0, status: STATUS_READY })
      clearTimeout(timer)
    }, 1000)
  }

  onReload = () => {
    if (this.state.status !== STATUS_READY && this.state.status !== STATUS_MATCH) {
      return
    }
    const ctxShadow = this.refs.shadowCanvas.getContext("2d")
    const ctxFragment = this.refs.fragmentCanvas.getContext("2d")

    // 清空画布
    ctxShadow.clearRect(0, 0, this.props.fragmentSize, this.props.fragmentSize)
    ctxFragment.clearRect(0, 0, this.props.fragmentSize, this.props.fragmentSize)

    this.setState(
      {
        isMovable: false,
        offsetX: 0, //图片截取的x
        offsetY: 0, //图片截取的y
        startX: 0, // 开始滑动的 x
        oldX: 0,
        currX: 0, // 滑块当前 x,
        status: STATUS_LOADING
      },
      this.props.onReload
    )
  }

  onShowTips = () => {
    if (this.state.showTips) {
      return
    }

    const tipsIndex = this.state.status === STATUS_MATCH ? 0 : 1
    this.setState({ showTips: true, tipsIndex })
    const timer = setTimeout(() => {
      this.setState({ showTips: false })
      clearTimeout(timer)
    }, 2000)
  }

  render() {
    const { imageUrl, imageWidth, imageHeight, fragmentSize } = this.props
    const { offsetX, offsetY, currX, showTips, tipsIndex } = this.state
    const tips = arrTips[tipsIndex]

    return (
      <div className="image-code" style={{ width: imageWidth }}>
        <div className="image-container" style={{ height: imageHeight, backgroundImage: `url("${imageUrl}")` }}>
          <canvas
            ref="shadowCanvas"
            className="canvas"
            width={fragmentSize}
            height={fragmentSize}
            style={{ left: offsetX + "px", top: offsetY + "px" }}
          />
          <canvas
            ref="fragmentCanvas"
            className="canvas"
            width={fragmentSize}
            height={fragmentSize}
            style={{ top: offsetY + "px", left: currX + "px" }}
          />

          <div className={showTips ? "tips-container--active" : "tips-container"}>
            <i className="tips-ico" style={{ backgroundImage: `url("${tips.ico}")` }} />
            <span className="tips-text">{tips.text}</span>
          </div>
        </div>

        <div className="reload-container">
          <div className="reload-wrapper" onClick={this.onReload}>
            <i className="reload-ico" style={{ backgroundImage: `url("${icoReload}")` }} />
            <span className="reload-tips">刷新验证</span>
          </div>
        </div>

        <div className="slider-wrpper" onMouseMove={this.onMoving} onMouseLeave={this.onMoveEnd}>
          <div className="slider-bar">按住滑块,拖动完成拼图</div>
          <div
            className="slider-button"
            onMouseDown={this.onMoveStart}
            onMouseUp={this.onMoveEnd}
            style={{ left: currX + "px", backgroundImage: `url("${icoSlider}")` }}
          />
        </div>
      </div>
    )
  }
}

export default ImageCode
// styles.css

.image-code {
  padding: 10px;
  user-select: none;
}

.image-container {
  position: relative;
  background-color: #ddd;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.reload-container {
  margin: 20px 0;
}

.reload-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.reload-ico {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: center/cover no-repeat;
}

.reload-tips {
  font-size: 14px;
  color: #666;
}

.slider-wrpper {
  position: relative;
  margin: 10px 0;
}

.slider-bar {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: #999;
  background-color: #ddd;
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  transform: translateY(-50%);
  cursor: pointer;
  background: #fff center/80% 80% no-repeat;
  box-shadow: 0 2px 10px 0 #333;
}

/* 提示信息 */
.tips-container,
.tips-container--active {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  padding: 10px;
  transform: translate(-50%, -50%);
  transition: all 0.25s;
  background: #fff;
  border-radius: 5px;

  visibility: hidden;
  opacity: 0;
}

.tips-container--active {
  visibility: visible;
  opacity: 1;
}

.tips-ico {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: center/cover no-repeat;
}

.tips-text {
  color: #666;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • React传值 组件传值 之间的关系详解

    react 组件相互之间的传值: 传值分父级组件传值给子组件 子组件传值给父组件 平级组件.没有嵌套的组件相互传值 1.父组件向子组件传值 父组件通过属性的形式来向子组件传值,子组件通过props来接受父组件传递过来的参数 //子组件 class list extends React.Component{ constructor(props){ super(props); // 初始化可以不用管 } render(){ return( <div> <div>{this.props.

  • Vue和React组件之间的传值方式详解

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作 父->子:通过props进行传递数据给子组件 子->父:通过emit向父组件传值 同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修

  • react-router实现跳转传值的方法示例

    前言 本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: react-router跳转传值 1.引入包 import {hashHistory} from 'React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:va

  • React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re

  • React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • react写一个select组件的实现代码

    之前一直用的antd的Select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法.观察select组件: <select onChange={(value) => {this.value=value}} <option value='1'>man</option> <option value='0'>woman</option> </select> 可以看出数据都是在option中,有值val

  • react 组件传值的三种方法

    整理 react 组件传值 三种方式 父组件向子组件传值(通过props传值) 子组件: class Children extends Component{ constructor(props){ super(props); } render(){ return( <div>这是:{this.props.name}</div> // 这是 父向子 ) } } 父组件: class App extends React.Component{ render(){ return( <

  • react的滑动图片验证码组件的示例代码

    业务需求,需要在系统登陆的时候,使用"滑动图片验证码",来验证操作的不是机器人. 效果图 使用方式 在一般的页面组件引用即可.onReload这个函数一般是用来请求后台图片的. class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({

  • 使用 Node.js 模拟滑动拼图验证码操作的示例代码

    近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu

  • 基于vue的验证码组件的示例代码

    最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个. 演示 分析验证码组件 分析验证码功能 随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化) 不同的数字或者字母有不同的字体大写 (功能优化) 不同的数字或者字母有不同的边距 (功能优化) 不同的数字或者字母有不同的倾斜角度 (功能优化) 更多功能优化... 分析组件功能 可以设置生成验证码的长度 (基本功能) 可以设置

  • react render props模式实现组件复用示例

    目录 一 render props的使用步骤 二 组件的复用 三 使用children名代替属性 一 render props的使用步骤 1 创建要复用的组件,在组件中提供要复用的状态逻辑代码2 将要复用的state作为方法的参数,暴露到组件外部 import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component { render() { ret

  • React Native使用fetch实现图片上传的示例代码

    本文介绍了React Native使用fetch实现图片上传的示例代码,分享给大家,具体如下: 普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {J

  • .Net Core 实现图片验证码的实现示例

    记录自己的学习,参考了网上各位大佬的技术,往往在登录的时候需要使用到验证码来进行简单的一个校验,这边使用在.net core上进行生成图片二维码 思路很简单=> 生成一个随机数->保存到服务端Session->生成随机码对应的图片给前端->登录的时候进行校验(也可以在后端进行随机码的token加密,存到Cooick里面在前端进行校验) 第一步:生成随机数 private static string RndNum(int VcodeNum) { //验证码可以显示的字符集合 stri

  • react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan

  • Springboot+SpringSecurity实现图片验证码登录的示例

    这个问题,网上找了好多,结果代码都不全,找了好多,要不是就自动注入的类注入不了,编译报错,要不异常捕获不了浪费好多时间,就觉得,框架不熟就不能随便用,全是坑,气死我了,最后改了两天.终于弄好啦; 问题主要是: 返回的验证码不知道在SpringSecurity的什么地方和存在内存里的比较?我用的方法是前置一个过滤器,插入到表单验证之前. 比较之后应该怎么处理,:比较之后要抛出一个继承了AuthenticationException的异常 其次是捕获验证码错误异常的处理? 捕获到的异常交给自定义验证

  • Flutter实现单选,复选和开关组件的示例代码

    目录 1.开关 Switch 2.单选 Radio 3.复选多选 Checkbox 小结 1.开关 Switch 构造方法: const Switch({ Key? key, required this.value,//当前开关状态 required this.onChanged,// 改变状态回调 this.activeColor,// 开启全部颜色 this.activeTrackColor,// 开启轨道的颜色 this.inactiveThumbColor,//关闭滑块颜色 this.i

  • Spring Security 图片验证码功能的实例代码

    验证码逻辑 以前在项目中也做过验证码,生成验证码的代码网上有很多,也有一些第三方的jar包也可以生成漂亮的验证码.验证码逻辑很简单,就是在登录页放一个image标签,src指向一个controller,这个Controller返回把生成的图片以输出流返回给页面,生成图片的同时把图片上的文本放在session,登录的时候带过来输入的验证码,从session中取出,两者对比.这位老师讲的用Spring Security集成验证码,大体思路和我说的一样,但更加规范和通用些. spring securi

随机推荐