JS实现图片验证码功能

2024-12-01 09:22:19

本文实例为大家分享了JS实现图片验证码功能的具体代码，供大家参考，具体内容如下

以下代码可以直接copy运行，不需要引入jquery.jar

1. html代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%=request.getContextPath()%>/js/gVerify.js"></script>
<style type="text/css">
body, html {
    width: 100%;
    text-align: center;
}
#picyzm {
    width: 100px;
    height: 40px;
    display: inline-block;
    margin: 0 30px;
}
#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;
}
</style>
</head>
<body>
    <div id="verifyCodeDemo">
        <input type="text" id="code_input" placeholder="在这个框里输入验证码">
        <p id="picyzm"></p>
    </div>
    <input type="button" value="验证" id="btn">
   
    <script type="text/javascript">
        //初始化验证码
        var verifyCode = new GVerify({
            id : "picyzm",
            type : "blend"
        });
        //点击按钮验证
        var code = document.getElementById("code_input");
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            var res = verifyCode.validate(code.value);
            if (res) {
                alert("验证通过");
            } else {
                alert("验证码错误");
            }
        }
    </script>
</body>
</html>

2. 引入gVerify.js

!(function(window, document) {
    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 <= 4; 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 / 5 * 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{
                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);

3. 效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js插件实现图片滑动验证码

图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标. 先上代码吧,做个备份记录 jquery.lgymove.js /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }
JS扩展Z-Blog图片验证码的单击自动刷新与评论内容自动保存

在script/common.js最后加入下面的话可以实现图片验证码的自动刷新与评论内容自动保存(ForIE) 由于Z-Blog的JS扩展机制不够好,在不重建的情况下扩展东西只能用window.onload(IE). 既然用了window.onload,那就干脆用window.clipboardData了. 大家是不是期盼这两个功能很久了?没有了Ajax的,这两个功能就太重要太重要太重要了. 实际这个函数因为先天缺陷并不完美,下一版,构想在每一页下面加上一句话读一次LoadExtraScript
Nodejs中使用captchapng模块生成图片验证码

Nodejs项目,在做图片验证码的时候遇到了难题.Nodejs没有图片库,以后会有,但是现在没有. 网络上搜索一圈,有几个解决方案: 1.采用第三方验证码程序,有的时候,项目可能不允许: 2.使用Java或者PHP生成图片,Nodejs调用,中间采用Redies共享: 这两种方式都不太理想,好在终于找到了可以支持Nodejs图片验证码的一个库,虽然只支持数字,但是也还不错.原理是使用Base64的图片编码方式. 这个库的Gighub地址是:https://github.com/GeorgeCha
在JSP页面中动态生成图片验证码的方法实例

在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %> <%@ taglib http://struts.apache.org/tags-bean">ht
js+h5 canvas实现图片验证码

本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随机生成颜色字符串及障碍物点击验证码可变更验证码图案二.使用步骤 1.html+css 代码如下(示例): <div class="login_code_box"> <div class="login_code"> <input
Js逆向实现滑动验证码图片还原的示例代码

本文列举两个例子:某象和某验的滑动验证一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的那你应该会想到,那段
JSP实用教程之简易图片验证码的实现方法（附源码）

前言很多新手对图片验证码不是很了解,所以本文尝试通过一个简单的 JSP 小程序来实现验证码功能.文中给出了详细的示例代码,文末给出了完整实例代码的下载地址,下面话不多说了,来一起看看详细的介绍吧. 效果图示例代码前台代码如下: <form action="action.jsp" method="POST"> <label> 用户名: <input type="text" name="name"
node.js WEB开发中图片验证码的实现方法

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿
Node.JS用纯JavaScript生成图片或滑块式验证码功能

有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si
纯JS实现图片验证码功能并兼容IE6-8(推荐)

最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

JS实现图片验证码功能

相关推荐

随机推荐