在vue项目或者react项目中实现图形验证码功能

效果演示

使用说明

我对这个图形验证码做了一个组件的封装，如果你的项目是vue项目就粘贴vue章节的组件代码，是react项目就粘贴react章节的组件代码。组件的使用很简单，只需要传递一个prop，prop是更新验证码的方法，方法需要返回验证码的值。如果要改图形容器的大小直接改组件的状态值就行了。

Vue项目中使用图形验证码

1.创建组件PicAuthCode.vue，粘贴如下代码

<template><div style="margin:10px"><canvas ref="canvas":width="contentWidth" :height="contentHeight"/><span :style="this.textStyle" @click="refresh()">换一张</span></div>
</template>
<script>// 作用：防止暴力登录破解和批量注册export default {name: 'SIdentify',props: {setCode:{type:Function,default:()=>''   //更新验证码的方法,返回验证码即可}},data(){return {identifyCode:'',contentWidth: 100,contentHeight: 35,backgroundColorMin: 180,backgroundColorMax:240,fontSizeMin: 25,fontSizeMax: 30,colorMin: 50,colorMax: 160,lineColorMin:40,lineColorMax: 180,dotColorMin: 0,dotColorMax: 255,textStyle:{fontSize:'12px',color:'gray',marginLeft:'6px',cursor:'pointer',padding:'5px',userSelect:"none"}}},methods: {drawPic() {let canvas = this.$refs.canvaslet ctx = canvas.getContext('2d')ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) ctx.strokeStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) ctx.strokeRect(0,0,this.contentWidth, this.contentHeight) for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i)}this.drawLine(ctx)this.drawDot(ctx)},randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min)},randomColor(min, max) {let r = this.randomNum(min, max)let g = this.randomNum(min, max)let b = this.randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'},drawText(ctx, txt, i) {ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' //字体大小ctx.textBaseline = 'alphabetic' let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))let y = this.randomNum(this.fontSizeMax, this.contentHeight - 12)let deg = this.randomNum(-45, 45)ctx.translate(x, y)ctx.rotate(deg * Math.PI / 180) ctx.fillText(txt, 0, 0)ctx.rotate(-deg * Math.PI / 180)ctx.translate(-x, -y)},drawLine(ctx) {for (let i = 0; i < 8; i++) {ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)ctx.beginPath() ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //设置起点x,yctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线ctx.stroke() }},drawDot(ctx) {for (let i = 0; i < 100; i++) {ctx.fillStyle = this.randomColor(0, 255)ctx.beginPath()ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)ctx.fill()}},refresh(){const words='AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz'let code=''for(let i=0;i<4;i++){ code+=words[Math.floor( Math.random()*52)]}this.identifyCode=this.setCode()?this.setCode():code}},mounted() {this.refresh()},watch:{identifyCode(){this.drawPic()}}}</script>

2.在父组件中使用图形验证码组件

<template >
<div>
<PicAuthCode :setCode='setCode' />
</div>
</template><script>
import PicAuthCode from "./components/PicAuthCode.vue"export default {methods: {setCode(){const words='AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz'let code=''for(let i=0;i<4;i++){ code+=words[Math.floor( Math.random()*52)]}return code           }
},
components:{PicAuthCode,
},}
</script>

react项目中使用图形验证码

1.创建组件PicAuthCode.jsx,粘贴如下代码。是类组件就粘贴类组件，是函数组件就粘贴函数组件。
类组件

import React, { Component } from 'react'export default class PicAuthCode extends Component {static defaultProps={     setCode:()=>""       //更新验证码的方法,返回验证码即可}state={contentWidth: 100,contentHeight: 35,codeLength:4,backgroundColorMin: 180,backgroundColorMax:240,fontSizeMin: 25,fontSizeMax: 30,colorMin: 50,colorMax: 160,lineColorMin:40,lineColorMax: 180,dotColorMin: 0,dotColorMax: 255,textStyle:{fontSize:'12px',color:'gray',marginLeft:'6px',cursor:'pointer',padding:'5px',userSelect:"none"}}drawPic=(code)=>{let canvas = this.canvaslet ctx = canvas.getContext('2d')ctx.fillStyle = this.randomColor(this.state.backgroundColorMin, this.state.backgroundColorMax) ctx.strokeStyle = this.randomColor(this.state.backgroundColorMin, this.state.backgroundColorMax) ctx.fillRect(0, 0, this.state.contentWidth,this.state.contentHeight) ctx.strokeRect(0,0,this.state.contentWidth,this.state.contentHeight) for (let i = 0; i < code.length; i++) {this.drawText(ctx,code[i], i)}this.drawLine(ctx)this.drawDot(ctx)}  randomNum=(min, max)=>{return Math.floor(Math.random() * (max - min) + min)}randomColor=(min, max)=>{let r = this.randomNum(min, max)let g = this.randomNum(min, max)let b = this.randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'}drawText=(ctx, txt, i)=>{ctx.fillStyle = this.randomColor(this.state.colorMin,this.state.colorMax)ctx.font = this.randomNum(this.state.fontSizeMin,this.state.fontSizeMax) + 'px SimHei' ctx.textBaseline = 'alphabetic' let x = (i + 1) * (this.state.contentWidth / (this.state.codeLength + 1))let y = this.randomNum(this.state.fontSizeMax, this.state.contentHeight - 12)let deg = this.randomNum(-45, 45)ctx.translate(x, y)ctx.rotate(deg * Math.PI / 180) ctx.fillText(txt, 0, 0)ctx.rotate(-deg * Math.PI / 180)ctx.translate(-x, -y)}drawLine=(ctx)=>{for (let i = 0; i < 8; i++) {ctx.strokeStyle = this.randomColor(this.state.lineColorMin,this.state.lineColorMax)ctx.beginPath() ctx.moveTo(this.randomNum(0, this.state.contentWidth), this.randomNum(0, this.state.contentHeight)) //设置起点x,yctx.lineTo(this.randomNum(0,this.state.contentWidth), this.randomNum(0, this.state.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线ctx.stroke() }}drawDot=(ctx)=>{for (let i = 0; i < 100; i++) {ctx.fillStyle = this.randomColor(0, 255)ctx.beginPath()ctx.arc(this.randomNum(0, this.state.contentWidth), this.randomNum(0, this.state.contentHeight), 1, 0, 2 * Math.PI)ctx.fill()}}refresh=()=>{const words='AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz'let code=''for(let i=0;i<this.state.codeLength;i++){ code+=words[Math.floor( Math.random()*52)]}const fooCode=this.props.setCode()fooCode?this.drawPic(fooCode):this.drawPic(code)}componentDidMount(){this.refresh()}render() {return (<div style={{margin:'10px'}}><canvas ref={(el)=>{this.canvas=el}}width={this.state.contentWidth} height={this.state.contentHeight}/><span style={this.state.textStyle} onClick={this.refresh}>换一张</span></div>)}
}

函数组件

import {useState,useEffect,useRef} from 'react'export default function PicAuthCode(props) {PicAuthCode.defaultProps={     setCode:()=>""    //更新验证码的方法,返回验证码即可}const [config]=useState({contentWidth: 100,contentHeight: 35,backgroundColorMin: 180,backgroundColorMax:240,fontSizeMin: 25,fontSizeMax: 30,colorMin: 50,colorMax: 160,lineColorMin:40,lineColorMax: 180,dotColorMin: 0,dotColorMax: 255,textStyle:{fontSize:'12px',color:'gray',marginLeft:'6px',cursor:'pointer',padding:'5px',userSelect:"none"}})  const [identifyCode,setIdentifyCode]=useState('')const canvasRef=useRef()useEffect(()=>{refresh()},[])useEffect(()=>{identifyCode && drawPic()})PicAuthCode.defaultProps={setCode:()=>""      // 更新验证码的函数}const drawPic=()=>{let canvas = canvasRef.currentlet ctx = canvas.getContext('2d')ctx.fillStyle = randomColor(config.backgroundColorMin,config.backgroundColorMax) ctx.strokeStyle = randomColor(config.backgroundColorMin, config.backgroundColorMax) ctx.fillRect(0, 0, config.contentWidth,config.contentHeight) ctx.strokeRect(0,0,config.contentWidth,config.contentHeight) for (let i = 0; i < identifyCode.length; i++) {drawText(ctx,identifyCode[i], i)}drawLine(ctx)drawDot(ctx)}  const randomNum=(min, max)=>{return Math.floor(Math.random() * (max - min) + min)}const randomColor=(min, max)=>{let r = randomNum(min, max)let g = randomNum(min, max)let b = randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'}const drawText=(ctx, txt, i)=>{ctx.fillStyle = randomColor(config.colorMin,config.colorMax)ctx.font = randomNum(config.fontSizeMin,config.fontSizeMax) + 'px SimHei' ctx.textBaseline = 'alphabetic' let x = (i + 1) * (config.contentWidth / (identifyCode.length + 1))let y = randomNum(config.fontSizeMax, config.contentHeight - 12)let deg = randomNum(-45, 45)ctx.translate(x, y)ctx.rotate(deg * Math.PI / 180) ctx.fillText(txt, 0, 0)ctx.rotate(-deg * Math.PI / 180)ctx.translate(-x, -y)}const drawLine=(ctx)=>{for (let i = 0; i < 8; i++) {ctx.strokeStyle = randomColor(config.lineColorMin,config.lineColorMax)ctx.beginPath() ctx.moveTo(randomNum(0, config.contentWidth), randomNum(0, config.contentHeight)) //设置起点x,yctx.lineTo(randomNum(0,config.contentWidth), randomNum(0, config.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线ctx.stroke() }}const drawDot=(ctx)=>{for (let i = 0; i < 100; i++) {ctx.fillStyle = randomColor(0, 255)ctx.beginPath()ctx.arc(randomNum(0, config.contentWidth), randomNum(0, config.contentHeight), 1, 0, 2 * Math.PI)ctx.fill()}}const refresh=()=>{const words='AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz'let code=''for(let i=0;i<4;i++){ code+=words[Math.floor( Math.random()*52)]}props.setCode?setIdentifyCode(props.setCode()):setIdentifyCode(code) }return (<div style={{margin:'10px'}}><canvas ref={canvasRef}width={config.contentWidth} height={config.contentHeight}/><span style={config.textStyle} onClick={refresh}>换一张</span></div>)
}