react实现图形验证码_react的滑动图片验证码组件的示例代码

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

效果图

使用方式

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

class App extends Component {

state = {

url: ""

}

componentDidMount() {

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

}

onReload = () => {

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

}

render() {

return (

imageUrl={this.state.url}

onReload={this.onReload}

onMatch={() => {

console.log("code is match")

}}

/>

)

}

}

上代码

// 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