How to realize the function of Picture CAPTCHA by JS

This article mainly explains "how to achieve the function of picture CAPTCHA in JS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "JS how to achieve picture CAPTCHA function" it!

1. Html code

Body, html {width: 100%; text-align: center;} # picyzm {width: 100px; height: 40px; display: inline-block; margin: 030px;} # verifyCodeDemo {width: 100%; display: flex; margin-top: 200px; justify-content: center;} # btn {margin: 30px auto; background-color: blue; color: # fff; border-radius: 5px; border: 0; width: 100px Height: 40px;}

/ / initialization verification code var verifyCode = new GVerify ({id: "picyzm", type: "blend"}); / / Click the button to verify that var code = document.getElementById ("code_input"); var btn = document.getElementById ("btn"); btn.onclick = function () {var res = verifyCode.validate (code.value) If (res) {alert ("verification passed");} else {alert ("CAPTCHA error");}}

two。 Introduction of gVerify.js

! (function (window, document) {function GVerify (options) {/ / create a graphic CAPTCHA object Receive options object as parameter this.options = {/ / default options parameter value id: ", / / Container Id canvasId:" verifyCanvas ", / / ID width of / / canvas:" 100 ", / / default canvas width height:" 30 ", / / default canvas height type:" blend " / / default type of graphic verification code blend: mixed alphanumeric type, number: pure number, letter: pure letter code: ""} if (Object.prototype.toString.call (options) = = "[object Object]") {/ / determine the incoming parameter type for (var i in options) {/ / based on the passed parameter Modify the default parameter value this.options [I] = options [I] }} else {this.options.id = options;} this.options.numArr = "0 1, 2, 3, 4, 5, 6, 7, 8, 9" .split (","); this.options.letterArr = getAllLetter (); this._init (); this.refresh () } GVerify.prototype = {/ * * version number * * / version: '1.0.0, / * initialization method * * / _ init: function () {var con = document.getElementById (this.options.id); var canvas = document.createElement ("canvas"); this.options.width = con.offsetWidth > 0? Con.offsetWidth: "100s"; this.options.height = con.offsetHeight > 0? Con.offsetHeight: "30"; canvas.id = this.options.canvasId; canvas.width = this.options.width; canvas.height = this.options.height; canvas.style.cursor = "pointer"; canvas [XSS _ clean] = "your browser version does not support canvas"; con.appendChild (canvas); var parent = this Canvas.onclick = function () {parent.refresh ()}}, / * * generate CAPTCHA * * / refresh: function () {this.options.code = ""; var canvas = document.getElementById (this.options.canvasId) If (canvas.getContext) {var ctx = canvas.getContext ('2d');} else {return;} ctx.textBaseline = "middle"; ctx.fillStyle = randomColor (180,240); ctx.fillRect (0,0, this.options.width, this.options.height) If (this.options.type = = "blend") {/ / determine the CAPTCHA type var txtArr = this.options.numArr.concat (this.options.letterArr);} else if (this.options.type = = "number") {var txtArr = this.options.numArr;} else {var txtArr = this.options.letterArr } for (var I = 1; I