图形验证码

最新推荐文章于 2023-07-02 15:46:19 发布
CEZLZ
最新推荐文章于 2023-07-02 15:46:19 发布
阅读量422
点赞数
分类专栏：插件文章标签： javascript 前端
本文链接：https://blog.csdn.net/CEZLZ/article/details/108453451
版权
插件专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #v_container {
        width: 200px;
        height: 80px;
        
      }
    </style>
  </head>
  <body>
    <!-- 图形验证码 -->
    <div>
        <form>
            验证码：<input id="code_input" type="text">
            <div id="v_container"></div>
            <button id="btn">提交</button>
        </form>
    </div>
    
    <script>
        (function (window, document) {
            var size = 6;//设置验证码长度
            function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
                this.options = { //默认options参数值
                    id: "", //容器Id
                    canvasId: "verifyCanvas", //canvas的ID
                    width: "100", //默认canvas宽度
                    height: "30", //默认canvas高度
                    type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
                    code: "",
                }
                if (Object.prototype.toString.call(options) == "[object Object]") {//判断传入参数类型
                    for (var i in options) { //根据传入的参数，修改默认参数值
                        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: '1.0.0',

                /**初始化方法**/
                _init: function () {
                    var con = document.getElementById(this.options.id);
                    var canvas = document.createElement("canvas");
                    this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
                    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.innerHTML = "您的浏览器版本不支持canvas";
                    con.appendChild(canvas);
                    var parent = this;
                    canvas.onclick = function () {
                        parent.refresh();
                    }
                },

                /**生成验证码**/
                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") { //判断验证码类型
                        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 <= size; i++) {
                        var txt = txtArr[randomNum(0, txtArr.length)];
                        this.options.code += txt;
                        ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; //随机生成字体大小
                        ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
                        ctx.shadowOffsetX = randomNum(-3, 3);
                        ctx.shadowOffsetY = randomNum(-3, 3);
                        ctx.shadowBlur = randomNum(-3, 3);
                        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
                        var x = this.options.width / (size + 1) * i;
                        var y = this.options.height / 2;
                        var deg = randomNum(-30, 30);
                        /**设置旋转角度和坐标原点**/
                        ctx.translate(x, y);
                        ctx.rotate(deg * Math.PI / 180);
                        ctx.fillText(txt, 0, 0);
                        /**恢复旋转角度和坐标原点**/
                        ctx.rotate(-deg * Math.PI / 180);
                        ctx.translate(-x, -y);
                    }
                    /**绘制干扰线**/
                    for (var i = 0; i < 4; i++) {
                        ctx.strokeStyle = randomColor(40, 180);
                        ctx.beginPath();
                        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.stroke();
                    }
                    /**绘制干扰点**/
                    for (var i = 0; i < this.options.width / 4; i++) {
                        ctx.fillStyle = randomColor(0, 255);
                        ctx.beginPath();
                        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
                        ctx.fill();
                    }
                },

                /**验证验证码**/
                validate: function (code) {
                    var code = code.toLowerCase();
                    var v_code = this.options.code.toLowerCase();
                    if (code == v_code) {
                        return true;
                    } else {
                        this.refresh();
                        return false;
                    }
                }
            }
            /**生成字母数组**/
            function getAllLetter() {
                var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
                return letterStr.split(",");
            }
            /**生成一个随机数**/
            function randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }
            /**生成一个随机色**/
            function randomColor(min, max) {
                var r = randomNum(min, max);
                var g = randomNum(min, max);
                var b = randomNum(min, max);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            window.GVerify = GVerify;
        })(window, document);

        var verifyCode = new GVerify("v_container");   // 实例化一个图形验证码

        var btn = document.getElementById("btn")
        btn.onclick = function () {
            var res = verifyCode.validate(document.getElementById("code_input").value);
            if(res) {
                return alert("验证通过")
            } else {
                return alert("验证不通过")
            }
        }
    </script>
  </body>
</html>
CEZLZ
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图形验证码

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { ma
复制链接

扫一扫
专栏目录