图形验证码

来源：互联网发布：珠海网络电视台编辑：程序博客网时间：2024/05/18 00:46

/*====================来自网络=====================*/

图形验证码

验证码的功能一般是防止使用程序恶意注册、暴力破解或批量发帖而设置的。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰像素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

最常见的验证码主要有以下几种：

1、四位数字，随机的数字字符串，最原始的验证码，验证作用几乎为零。

2、随机数字图片验证码。图片上的字符比较中规中矩，有的可能加一些随机干扰素，还有一些是随机字符颜色，验证作用比上一个好。没有基本图形图像学知识的人，不可破

3、各种图片格式的随机数+随机大写英文字符+随机干扰像素+随机位置。

4、汉字是注册目前最新的验证码，随机生成，打起来更难了，影响用户体验，所以，一般应用的比较少。

对于识别验证码的程序来说，最难的部分是验证字符的切割和特征码的建立，而国内很多程序员制作验证码时，总是喜欢在验证码加很多干扰素，干扰线，影响效果不说，还达不到很好的效果；所以，要想使自己验证码难于被识别，只做下面两点就够了

1、字符粘连，最好所有的字符都有粘连的部分；

2、不要使用规格字符，验证码的各个部分使用不同比例的缩放或者旋转。

只要做到这两点，或者这两点的变形，识别程序就很难识别。

/*====================来自网络=====================*/

效果截图：

实现代码：

来自网络加上个人修改

实现页面：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="vCode.js"></script>    <script>        onload = function () {            var container2 = document.getElementById("vCode2");            var code2 = new vCode(container2, {                len: 4,                bgColor: "#444444",                colors: [                    "#DDDDDD",                    "#DDFF77",                    "#77DDFF",                    "#99BBFF",                    //"#7700BB",                    "#EEEE00"                ]            });            document.getElementById("btn2").addEventListener("click", function () {                alert(code2.verify(document.getElementById("code2").value));            }, false);        };    </script>    <style>        *{margin:0;padding:0;}        .codeBox{height:40px;margin:100px auto;width:400px;position:relative;}        #code2{text-indent:10px;height:40px;line-height:40px;display:inline-block;position:relative;top:-15px;}        #btn2{width:100px;height:40px;line-height:40px;background:#5a935e;color:#fff;display:inline-block;text-align:center;border:1px solid #5a935e;position:relative;top:-15px;cursor:pointer;}    </style></head><body><div class="codeBox">    <input type="text" id="code2" placeholder="请输入验证码" value=""/>    <div id="vCode2" style="width:70px; height: 40px; border: 1px solid #ccc; display: inline-block;"></div>    <a id="btn2">验证</a></div></body></html>

方法封装js即vCode.js

(function(){    var randstr = function(length){        var key = {            str : [                'a','b','c','d','e','f','g','h','i','j','k','l','m',                'o','p','q','r','s','t','x','u','v','y','z','w','n',                '0','1','2','3','4','5','6','7','8','9'            ],            randint : function(n,m){                var c = m-n+1;                var num = Math.random() * c + n;                return  Math.floor(num);            },            randStr : function(){                var _this = this;                var leng = _this.str.length - 1;                var randkey = _this.randint(0, leng);                return _this.str[randkey];            },            create : function(len){                var _this = this;                var l = len || 10;                var str = '';                for(var i = 0 ; i<l ; i++){                    str += _this.randStr();                }                return str;            }        };        length = length ? length : 10;        return key.create(length);    };    var randint = function(n,m){        var c = m-n+1;        var num = Math.random() * c + n;        return  Math.floor(num);    };    var vCode = function(dom, options){        this.codeDoms = [];        this.lineDoms = [];        this.initOptions(options);        this.dom = dom;        this.init();        this.addEvent();        this.update();        this.mask();    };    vCode.prototype.init = function(){        this.dom.style.position = "relative";        this.dom.style.overflow = "hidden";        this.dom.style.cursor = "pointer";        this.dom.title = "点击更换验证码";        this.dom.style.background = this.options.bgColor;        this.w = this.dom.clientWidth;        this.h = this.dom.clientHeight;        this.uW = this.w / this.options.len;    };    vCode.prototype.mask = function(){        var dom = document.createElement("div");        dom.style.cssText = [            "width: 100%",            "height: 100%",            "left: 0",            "top: 0",            "position: absolute",            "cursor: pointer",            "z-index: 9999999"        ].join(";");        dom.title = "点击更换验证码";        this.dom.appendChild(dom);    };    vCode.prototype.addEvent = function(){        var _this = this;        _this.dom.addEventListener("click", function(){            _this.update.call(_this);        });    };    vCode.prototype.initOptions = function(options){        var f = function(){            this.len = 4;            this.fontSizeMin = 20;            this.fontSizeMax = 30;            this.colors = [                "green",                "red",                "blue",                "#53da33",                "#AA0000",                "#FFBB00"            ];            this.bgColor = "#FFF";            this.fonts = [                "Times New Roman",                "Georgia",                "Serif",                "sans-serif",                "arial",                "tahoma",                "Hiragino Sans GB"            ];            this.lines = 4;            this.lineColors = [                "#888888",                "#FF7744",                "#888800",                "#008888"            ];            this.lineHeightMin = 1;            this.lineHeightMax = 3;            this.lineWidthMin = 1;            this.lineWidthMax = 60;        };        this.options = new f();        if(typeof options === "object"){            for(i in options){                this.options[i] = options[i];            }        }    };    vCode.prototype.update = function(){        for(var i=0; i<this.codeDoms.length; i++){            this.dom.removeChild(this.codeDoms[i]);        }        for(var i=0; i<this.lineDoms.length; i++){            this.dom.removeChild(this.lineDoms[i]);        }        this.createCode();        this.draw();    };    vCode.prototype.createCode = function(){        this.code = randstr(this.options.len);    };    vCode.prototype.verify = function(code){        return this.code === code;    };    vCode.prototype.draw = function(){        this.codeDoms = [];        for(var i=0; i<this.code.length; i++){            this.codeDoms.push(this.drawCode(this.code[i], i));        }        this.drawLines();    };    vCode.prototype.drawCode = function(code, index){        var dom = document.createElement("span");        dom.style.cssText = [            "font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px",            "color:" + this.options.colors[randint(0,  this.options.colors.length - 1)],            "position: absolute",            "left:" + randint(this.uW * index, this.uW * index + this.uW - 15) + "px",            "top:" + randint(0, this.h - 30) + "px",            "transform:rotate(" + randint(-30, 30) + "deg)",            "-ms-transform:rotate(" + randint(-30, 30) + "deg)",            "-moz-transform:rotate(" + randint(-30, 30) + "deg)",            "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",            "-o-transform:rotate(" + randint(-30, 30) + "deg)",            "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],            "font-weight:" + randint(400, 900)        ].join(";");        dom.innerHTML = code;        this.dom.appendChild(dom);        return dom;    };    vCode.prototype.drawLines = function(){        this.lineDoms = [];        for(var i=0; i<this.options.lines; i++){            var dom = document.createElement("div");            dom.style.cssText = [                "position: absolute",                "opacity: " + randint(3, 8) / 10,                "width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px",                "height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px",                "background: " + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],                "left:" + randint(0, this.w - 20) + "px",                "top:" + randint(0, this.h) + "px",                "transform:rotate(" + randint(-30, 30) + "deg)",                "-ms-transform:rotate(" + randint(-30, 30) + "deg)",                "-moz-transform:rotate(" + randint(-30, 30) + "deg)",                "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",                "-o-transform:rotate(" + randint(-30, 30) + "deg)",                "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],                "font-weight:" + randint(400, 900)            ].join(";");            this.dom.appendChild(dom);            this.lineDoms.push(dom);        }    };    this.vCode = vCode;}).call(this);

阅读全文

0 0