vue實現登入時的圖片驗證碼
阿新 • • 發佈:2021-04-28
本文例項為大家分享了vue實現登入時的圖片驗證碼的具體程式碼,供大家參考,具體內容如下
效果圖
一、新建vue元件components/identify/identify.vue
<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default { name: 'SIdentify',props: { identifyCode: { type: String,default: '1234' },fontSizeMin: { type: Number,default: 28 },fontSizeMax: { type: Number,default: 40 },backgroundColorMin: { type: Number,default: 180 },backgroundColorMax: { type: Number,default: 240 },colorMin: { twww.cppcns.comype: Number,default: 50 },colorMax: { www.cppcns.com type: Number,default: 160 },lineColorMin: { type: Number,lineColorMax: { type: Number,dotColorMin: { type: Number,default: 0 },dotColorMax: { type: Number,default: 255 },contentWidth: { type: Number,default: 112 },contentHeight: { type: Number,default: 40 } },methods: { // 生成一個隨機數 randomNum (min,max) { return Math.floor(Math.random() * (max - min) + min) },// 生成一個隨機的顏色 randomColor (min,max) { var r = this.randomNum(min,max) var g = this.randomNum(min,max) var b = this.randomNum(min,max) return 'rgb(' + r + ',' + g + ',' + b + ')' },drawPic () { var canvas = document.getElementById('s-canvas') var ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' // 繪製背景 ctx.fillStyle = this.randomColor( this.backgroundColorMin,this.b程式設計客棧ackgroundColorMax ) ctx.fillRect(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) },drawText (ctx,txt,i) { ctx.fillStyle = this.randomColor(this.colorMin,this.colorMax) ctx.font = this.randomNum(this.fontSizeMin,this.fontSizeMax) + 'px SimHei' var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax,this.contentHeight - 5) var deg = this.randomNum(-30,30) // 修改座標原點和旋轉角度 ctx.translate(x,y) ctx.rotate(deg * Math.PI / 270) ctx.fi程式設計客棧llText(txt,0) // 恢復座標原點和旋轉角度 ctx.rotate(-deg * Math.PI / 270) ctx.translate(-x,-y) },drawLine (ctx) { // 繪製干擾線 for (let i = 0; i < 2; i++) { ctx.strokeStyle = this.randomColor( this.lineColorMin,this.lineColorMax ) ctx.beginPath() ctx.moveTo( this.randomNum(0,this.contentWidth),this.randomNum(0,this.cont程式設計客棧entHeight) ) ctx.lineTo( this.randomNum(0,this.contentHeight) ) ctx.stroke() } },drawDot (ctx) { // 繪製干擾點 for (let i = 0; i < 20; i++) { ctx.fillStyle = this.randomColor(0,255) ctx.beginPath() ctx.arc( this.randomNum(0,this.contentHeight),1,2 * Math.PI ) ctx.fill() } } },watch: { identifyCode () { this.drawPic() } },mounted () { this.drawPic() } } </script> <style lang='less' scoped> .s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; } </style>
二、需要地方引入
<template> <span @click="refreshCode" style="cursor: pointer;"> <s-identify :identifyCode="identifyCode" ></s-identify> </span> </template> <script> // 引入圖片驗證碼元件 import SIdentify from '@/components/identify' export default { components: { SIdentify },data() { return { // 圖片驗證碼 identifyCode: '',// 驗證碼規則 identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',} },methods: { // 切換驗證碼 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes,4) },// 生成隨機驗證碼 makeCode(o,l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) ] } },} } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。