This article example shares the specific code of the Vue project to implement the graphic verification code for your reference. The specific content is as follows Effect preview: (The project requires a clean look, so there is no background. But the following code will include background interference) 1. Download the identify plug-in, command: npm i identify 2. Create a new vue component in your components directory. My name is: sIdentify.vue 3. Copy the following code into the component (you can customize it!) <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, default: 35 }, 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: { // 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 + ")"; }, transparent() { return "rgb(255,255,255)"; }, drawPic() { let canvas = document.getElementById("s-canvas"); let ctx = canvas.getContext("2d"); ctx.textBaseline = "bottom"; // Draw the background // ctx.fillStyle = this.randomColor( // this.backgroundColorMin, // this.backgroundColorMax // ); ctx.fillStyle = this.transparent(); ctx.fillRect(0, 0, this.contentWidth, this.contentHeight); // Draw text 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.contentWidth / (this.identifyCode.length + 1)); let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5); var deg = this.randomNum(-10, 10); // Modify the coordinate origin and rotation angle ctx.translate(x, y); ctx.rotate((deg * Math.PI) / 180); ctx.fillText(txt, 0, 0); // Restore the coordinate origin and rotation angle ctx.rotate((-deg * Math.PI) / 180); ctx.translate(-x, -y); }, drawLine(ctx) { // Draw interference lines 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.contentWidth), this.randomNum(0, this.contentHeight) ); ctx.stroke(); } }, drawDot(ctx) { // Draw interference points 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(); } } }, watch: identifyCode() { this.drawPic(); } }, mounted() { this.drawPic(); } }; </script> 4.Introduce the component on the page where you need the verification code and write the method: <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", // just type it in} }, methods: { refreshCode() {// this.identifyCode = ""; this.makeCode(this.identifyCodes,4); }, randomNum (min, max) { max = max + 1 return Math.floor(Math.random() * (max - min) + min) }, // Randomly generate verification code string makeCode (data, len) { for (let i = 0; i < len; i++) { this.identifyCode += data[this.randomNum(0, data.length - 1)] } } } </script> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Sql query MySql database table name and description table field (column) information
>>: Detailed explanation of sshd service and service management commands under Linux
When using justify-content:space-between layout, ...
This article introduces the effect of website pro...
Table of contents Requirement description: Requir...
This article shares the specific code for canvas ...
Table of contents 1. MHA 1. Concept 2. Compositio...
Table of contents 1. Project Environment 2. Proje...
Preface NAT forwarding: Simply put, NAT is the us...
As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...
Written in front In recent years, the live stream...
The one above shows the system time, and the one ...
The knowledge points summarized below are all fre...
Table of contents 1. Introduction 2. Thought Anal...
Despite props and events, sometimes you still nee...
Table of contents 1. Introduction to Harbor 1. Ha...
Detailed example of removing duplicate data in My...