This pen is about how we can create a captcha using javascript and display that as image using canvas.
Created
January 16, 2025 15:28
-
-
Save abddayan/a8d21f3b0f1817bb5833283866fc5150 to your computer and use it in GitHub Desktop.
Javascript Captcha As Image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body onload="createCaptcha()"> | |
| <form onsubmit="validateCaptcha()"> | |
| <div id="captcha"> | |
| </div> | |
| <input type="text" placeholder="Captcha" id="cpatchaTextBox"/> | |
| <button type="submit">Submit</button> | |
| </form> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var code; | |
| function createCaptcha() { | |
| //clear the contents of captcha div first | |
| document.getElementById('captcha').innerHTML = ""; | |
| var charsArray = | |
| "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*"; | |
| var lengthOtp = 6; | |
| var captcha = []; | |
| for (var i = 0; i < lengthOtp; i++) { | |
| //below code will not allow Repetition of Characters | |
| var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array | |
| if (captcha.indexOf(charsArray[index]) == -1) | |
| captcha.push(charsArray[index]); | |
| else i--; | |
| } | |
| var canv = document.createElement("canvas"); | |
| canv.id = "captcha"; | |
| canv.width = 100; | |
| canv.height = 50; | |
| var ctx = canv.getContext("2d"); | |
| ctx.font = "25px Georgia"; | |
| ctx.strokeText(captcha.join(""), 0, 30); | |
| //storing captcha so that can validate you can save it somewhere else according to your specific requirements | |
| code = captcha.join(""); | |
| document.getElementById("captcha").appendChild(canv); // adds the canvas to the body element | |
| } | |
| function validateCaptcha() { | |
| event.preventDefault(); | |
| debugger | |
| if (document.getElementById("cpatchaTextBox").value == code) { | |
| alert("Valid Captcha") | |
| }else{ | |
| alert("Invalid Captcha. try Again"); | |
| createCaptcha(); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input[type=text] { | |
| padding: 12px 20px; | |
| display: inline-block; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| } | |
| button{ | |
| background-color: #4CAF50; | |
| border: none; | |
| color: white; | |
| padding: 12px 30px; | |
| text-decoration: none; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| } | |
| canvas{ | |
| /*prevent interaction with the canvas*/ | |
| pointer-events:none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment