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
<br />Words are the inevitable product of hu...
I installed it in msi format, mainly to see the m...
Demand scenario: The boss asked me to use the cra...
A singly linked list can only be traversed from t...
question CSS fixed positioning position:fixed is ...
The blogger hasn't used MySQL for a month or ...
I recently started learning Linux. After reading ...
Copy code The code is as follows: <input type=...
This tag is not part of HTML3.2 and only supports ...
The virtual machine is in use or cannot be connec...
Preface 1. This article uses MySQL 8.0 version Co...
background When we want to log in to the MySQL da...
Solution function mergeImgs(list) { const imgDom ...
Table of contents Preface 1. Routing lazy loading...
What is keepalive? In normal development, some co...