JS 实现图片验证码功能

左手的ㄟ右手 2023-10-05 13:04 36阅读 0赞

#### 1 HTML代码 ####

<div style="margin: 0px auto 20px auto;width: 240px;">
        <input type="text" id="verify" style="margin: 10px 0px;width: 100px;height:26px;margin-left:5px;display: inline-block;float: left;">
        <canvas width="100" height="34" id="verifyCanvas" style="display: none;"></canvas>
        <img width="100" height="34" id="code_img" style="margin: 10px 10px;" onclick="imgRefresh('verifyCanvas','code_img','verify')">
    </div>

#### 2 JS代码 ####

var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", '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'];
    //绘制验证码
    var currentVerifyCode="";
    function drawVerificationCode(canvasId,codeImgId){
        var canvas = document.getElementById(canvasId);  //获取HTML端画布
        var context = canvas.getContext("2d");                 //获取画布2D上下文
        context.fillStyle = "cornflowerblue";                  //画布填充色
        context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布
        context.fillStyle = "white";                           //设置字体颜色
        context.font = "25px Arial";                           //设置字体
        var rand = new Array();
        var x = new Array();
        var y = new Array();
        currentVerifyCode="";
        for (var i = 0; i < 5; i++) {
            rand[i] = nums[Math.floor(Math.random() * nums.length)]
            x[i] = i * 16 + 10;
            y[i] = Math.random() * 20 + 20;
            context.fillText(rand[i], x[i], y[i]);
            currentVerifyCode+=rand[i];
        }
        //画3条随机线
        for (var i = 0; i < 3; i++) {
            drawline(canvas, context);
        }
    
        // 画30个随机点
        for (var i = 0; i < 30; i++) {
            drawDot(canvas, context);
        }
        convertCanvasToImage(canvasId,codeImgId,canvas);
    }
    // 随机线
    function drawline(canvas, context) {
        context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
        context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
        context.lineWidth = 0.5;                                                  //随机线宽
        context.strokeStyle = 'rgba(50,50,50,0.3)';                               //随机线描边属性
        context.stroke();                                                         //描边，即起点描到终点
    }
    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
    function drawDot(canvas, context) {
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px + 1, py + 1);
        context.lineWidth = 0.2;
        context.stroke();
    
    }
    // 绘制图片
    function convertCanvasToImage(canvasId,codeImgId,canvas) {
        document.getElementById(canvasId).style.display = "none";
        var image = document.getElementById(codeImgId);
        image.src = canvas.toDataURL("image/png");
        return image;
    }
    
    // 点击图片刷新
    function imgRefresh(canvasId,codeImgId,verifyTextId){
        $('#'+canvasId).remove();
        $('#'+verifyTextId).after('<canvas width="100" height="40" id="'+canvasId+'"></canvas>')
        drawVerificationCode(canvasId,codeImgId);
    }
    function getCurrentVerifyCode(){
        return currentVerifyCode;
    }
    $(function(){
        imgRefresh('verifyCanvas','code_img','verify');
    })

#### 3 最终效果图 ####

![20201102213303978.png][]

[20201102213303978.png]: https://img-blog.csdnimg.cn/20201102213303978.png

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 实现图片验证码功能

1 HTML代码 <div style="margin: 0px auto 20px auto;width: 240px;"> <input ty

左手的ㄟ右手/ 2023年10月05日 13:04/ 0 赞/ 37 阅读

相关验证码功能实现

本案例使用线程池实现定时任务,并修改数据库. 1.首先得到用户id和验证码code,并存入数据库(这里使用的hibnate框架) baseDao.executeBy

比眉伴天荒/ 2023年09月24日 15:56/ 0 赞/ 170 阅读

相关使用js实现图形验证码功能

一、效果展示 1、初始效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

小灰灰/ 2023年07月06日 11:50/ 0 赞/ 355 阅读

相关 js实现验证码功能

\前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮 <body>

柔情只为你懂/ 2023年02月28日 01:45/ 0 赞/ 41 阅读

相关 Java实现随机验证码和验证码图片渲染功能

0.注意事项： 1. 图片格式（宽、高）、干扰线及数量在工具类的成员变量配置 2. 验证码验证。验证码生成后是存储在session中的，使用相同的属性名（类似key）

﹏ヽ暗。殇╰゛Y/ 2023年01月20日 14:53/ 0 赞/ 284 阅读

相关登录中的图片验证码功能实现

添加kaptcha依赖 <dependency> <groupId>com.github.axet</groupId> <artifactId>k

旧城等待，/ 2022年12月27日 07:56/ 0 赞/ 217 阅读

相关 canvas——实现图片验证码(功能实现)

`canvas`实现图片验证码——效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

墨蓝/ 2022年08月31日 15:29/ 0 赞/ 265 阅读

相关 js案例——实现验证码功能

> 今天的内容是用js的基本语法实现网页中常见的验证码功能。大体思想：核心语法为math中随机数的使用利用随机数字来实现随机的数字字符汉字，利用字符串的拼接来实现

布满荆棘的人生/ 2022年03月26日 11:26/ 0 赞/ 358 阅读

相关 Flask图片验证码注册功能

注册又包含一些小功能：手机号，验证码图片验证码流程： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

客官°小女子只卖身不卖艺/ 2022年01月21日 05:17/ 0 赞/ 323 阅读

相关用JS实现简单的图片验证码

用JS实现简单的图片验证码 HTML主要代码如下： ![在这里插入图片描述][20191120122450735.png] JS 代码如下： <scri

怼烎@/ 2021年05月16日 20:36/ 0 赞/ 417 阅读