vue專案實現圖形驗證碼
阿新 • • 發佈:2021-04-28
本文例項為大家分享了vue專案實現圖形驗證碼的具體程式碼,供大家參考,具體內容如下
效果預覽:(專案要求清爽一點,所以沒背景。但是下面的程式碼會把背景干擾寫進去)
1.下載identify外掛,命令:npm i identify
2.在你的components目錄新建一個vue元件,我的命名是:sIdentify.vue
3.在元件內把下面的程式碼copy過去(可以自定義哈!)
<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: 35 },fontSizeMax: { type: Number,backgroundColorMin: { type: Number,default: 180 },backgroundColorMax: { type: Number,default: 240 },colorMin: { type: Number,default: 50 },colorMax: { type: Number,default: 160 },lineColorMin: { type: Number,default: 100 },lineColorMax: { type: Number,default: 200 },dotColorMin: { type: Number,default: 0 },dotColorMax: { type: Number,default: 255 },contentWidth: { type: Number,default: 120 },contentHeight: { type: Number,default: 40 } },methods: { // 生成一個隨機數 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 + ")"; },transparent() { return "rgb(255,255,255)"; },drawPic() { let canvas = document.getElementById("s-canvas"); let ctx = canvas.getContext("2d"); ctx.textBaseline = "bottom"; // 繪製背景 // ctx.fillStyle = this.randomColor( // this.backgroundColorMin,// this.backgroundColorMax // ); ctx.fillStyle = this.transparent(); 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"; let x = (i + 1) * (this.contenwWvROPsastWidth / (this.identifyCode.length + 1)); let y = this.randomNum(this.fontSizeMax,this.contentHeight - 5); var deg = this.randomNum(-10,10); // 修改座標原點和旋轉角度 ctx.translate(x,y); ctx.rotate((deg * Math.PI) / 180); ctx.fillText(txt,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) ); ctx.lineTo( this.randomNum(0,this.contentHeight) ); 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.randomNum(0,this.contentHeight),1,2 * Math.PI ); ctx.fill(); } } },watch: { identifyCode() { this.drawPic(); } },mounted() { this.drawPic(); } }; </script>
4.在你需要驗證碼的頁面引入元件並寫好方法:
<template> <div class="get-code" @click="refreshCode()"> <s-identify :identifyCode="identifyCode"></s-identify> </div> </template> <script> import SIdentify from "@/components/sIdentify.vue"; export default { components程式設計客棧: { SIdentify },data() { return { identifyCode: "",identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//隨便打的 } },methods: { refreshCode() {// this.identifyCode = ""; this.makeCode(this.identifyCodes,4); },randomNum (min,max) { max = max + 1 return Math.floor(Math.random() * (max - wWvROPsasmin) + min) },// 隨機生成驗證碼字串 makeCode (data,len) { for (let i = 0; i < len; i++) { this.identifyCode += data[this.randomNum(0,data.length - 1)] } } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。