How to implement graphic CAPTCHA when logging in by vue

This article mainly introduces how to achieve vue login graphics verification code, the article is very detailed, has a certain reference value, interested friends must read it!

The details are as follows

Effect picture:

Click on the pattern to switch characters

1. Create a new Identify.vue component

Export default {name: "identify", props: {identifyCode: {type: String, default:''}, fontSizeMin: {type: Number, default: 28}, fontSizeMax: {type: Number, default: 40}, backgroundColorMin: {type: Number, default: 180}, backgroundColorMax: {type: Number Default: 240}, colorMin: {type: Number, default: 50}, colorMax: {type: Number, default: 160}, lineColorMin: {type: Number, default: 40}, lineColorMax: {type: Number, default: 180}, dotColorMin: {type: Number, default: 0} DotColorMax: {type: Number, default: 255}, contentWidth: {type: Number, default: 130}, contentHeight: {type: Number, default: 40}}, methods: {/ / generate a random number randomNum (min, max) {return Math.floor (Math.random () * (max-min) + min)} / generate a random color 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 +')'} DrawPic () {let canvas = document.getElementById ('smurcanvasa') let ctx = canvas.getContext ('2d') ctx.textBaseline =' bottom' / / drawing background ctx.fillStyle = this.randomColor (this.backgroundColorMin, this.backgroundColorMax) ctx.fillRect (0,0, this.contentWidth, this.contentHeight) / / drawing text for (let I = 0 I < this.identifyCode.length This.identifyCode +) {this.drawText (ctx, this.identifyCode [I], I)} this.drawLine (ctx) this.drawDot (ctx)}, drawText (ctx, txt, I) {ctx.fillStyle = this.randomColor (this.colorMin, this.colorMax) ctx.font = this.randomNum (this.fontSizeMin This.fontSizeMax) +'px SimHei' let x = (I + 1) * (this.contentWidth / (this.identifyCode.length + 1)) let y = this.randomNum (this.fontSizeMax, this.contentHeight-5) let deg = this.randomNum (- 30,30) / / modify coordinate origin and rotation angle ctx.translate (x, y) ctx.rotate (deg * Math.PI / 270) ctx.fillText (txt, 0 0) / / restore coordinate origin and rotation angle ctx.rotate (- deg * Math.PI / 270) ctx.translate (- x,-y)}, drawLine (ctx) {/ / draw interference line for (let I = 0) I < 2 ) {ctx.strokeStyle = this.randomColor (this.lineColorMin, this.lineColorMax) ctx.beginPath () ctx.moveTo (this.randomNum (0, this.contentWidth), this.randomNum (0, this.contentHeight)) ctx.lineTo (this.randomNum (0, this.contentWidth), this.randomNum (0) This.contentHeight)) ctx.stroke ()}, drawDot (ctx) {/ / drawing interference points for (let I = 0) I < 20 Ctx.fillStyle +) {ctx.fillStyle = this.randomColor (0255) ctx.beginPath () ctx.arc (this.randomNum (0, this.contentWidth), this.randomNum (0, this.contentHeight), 1, 0, 2 * Math.PI) ctx.fill ()} Watch: {identifyCode () {this.drawPic ()}}, mounted () {this.drawPic ()}} # s-canvas {height: 38px }

two。 Register for use with the parent component index.vue

Import Identify from'@ / components/test/identify'export default {name: "index", components: {Identify}, data () {return {identifyCode:', / / CAPTCHA Rule identifyCodes: '123456789ABCDEFGGKNPQRSTUVWXYZ,}}, methods: {/ / toggle CAPTCHA refreshCode () {this.identifyCode =' 'this.makeCode (this.identifyCodes) 4) console.log (this.identifyCode)}, / / generate random verification code makeCode (o, l) {for (let I = 0) I