canvas实现随机验证码

更新日期: 2019-04-28阅读: 2.2k标签: 验证

知识点

canvas生成背景图和文字 设置字体样式和大小

String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写

随机抽取不重复的6位数字组成验证码字符串

效果图:


html:

    <div class="wraper">
        <input type="text" maxlength="6" placeholder="请输入验证码,不区分大小写" class="input">
        <span class="icon"></span>
        <p class="error">验证码输入有误,请重新输入</p>
        <div class="canvas-box">
            <canvas id="myCanvas" width="200" height="50"></canvas>
            <input type="button" class="refresh">
        </div>
        <div class="btn">
            <button class="submit">提交</button>
        </div>
    </div>


css:

    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
        background: hotpink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .wraper {
        width: 345px;
        margin: 30px;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ccc;
        background: #fff;
    }
    
    .input {
        width: 300px;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    .icon {
        float: right;
        width: 20px;
        height: 20px;
        margin-top: 13px;
        background: url('./img/yes.png') no-repeat;
        background-size: 100% 100%;
        display: none;
    }
    
    .error {
        margin-top: 10px;
        color: red;
        font-size: 12px;
        display: none;
    }
    
    .canvas-box {
        margin-top: 15px;
        position: relative;
    }
    
    #myCanvas {
        width: 300px;
        height: 60px;
    }
    
    .canvas-box .refresh {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('./img/refresh.png') no-repeat;
        background-size: 100% 100%;
        border: none;
        outline: none;
        cursor: pointer;
    }
    
    .btn {
        margin-top: 15px;
    }
    
    .btn .submit {
        width: 80px;
        height: 40px;
        border-radius: 5px;
        background: blue;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
    }


js:

    var arr = []; //筛选验证码的数组
    var value = '';
    //48-57 数字 65-90 大写字母  97-122 小写字母 
    for (var i = 48; i <= 57; i++) {
        arr.push(String.fromCharCode(i));
    }
    for (let i = 65; i <= 90; i++) {
        arr.push(String.fromCharCode(i));
    }
    for (let i = 97; i <= 122; i++) {
        arr.push(String.fromCharCode(i));
    }

    //生成随机验证码
    function getVerification() {
        var codeStr = '';
        var codeArr = [];
        value = '';
        while (true) {
            let a = Math.floor(Math.random() * arr.length);
            if (codeArr.indexOf(a) == -1) {
                codeArr.push(arr[a]);
            }
            if (codeArr.length == 6) {
                break;
            }
        }
        codeStr = codeArr.join(' ');
        value = codeArr.join('').toLowerCase();
        console.log(value)
        var myCanvas = document.getElementById('myCanvas');
        var ctx = myCanvas.getContext('2d');
        var img = new Image();
        img.src = './img/bg_pic.jpg';
        img.onload = function() {
            var pat = ctx.createPattern(img, 'no-repeat');
            ctx.fillStyle = pat;
            ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            ctx.textAlign = 'center';
            ctx.fillStyle = '#ccc';
            ctx.font = '30px Roboto Slab';
            ctx.setTransform(1, -0.12, 0.3, 1, 0, 12);
            ctx.fillText(codeStr, myCanvas.width / 2, 35);
        }
    }
    getVerification();

    //事件
    var refresh = document.getElementsByClassName('refresh')[0];
    var submit = document.getElementsByClassName('submit')[0];
    var inputValue = document.getElementsByClassName('input')[0];
    var icon = document.getElementsByClassName('icon')[0];
    var error = document.getElementsByClassName('error')[0];

    refresh.onclick = function() {
        getVerification();
    }
    submit.onclick = function() {
        if (inputValue.value.toLowerCase() === value) {
            icon.style.display = 'inline-block';
            icon.style.background = "url('./img/yes.png') no-repeat";
            icon.style.backgroundSize = "100% 100%";
            error.style.display = 'none';
            getVerification();
        } else {
            icon.style.display = 'inline-block';
            icon.style.background = "url('./img/error.png') no-repeat";
            icon.style.backgroundSize = "100% 100%";
            error.style.display = 'block';
            inputValue.value = '';
        }
    }

参考至腾讯课堂渡一教育

原文来自:https://www.cnblogs.com/sgs123/archive/2019/04/27/10780216.html


链接: https://www.fly63.com/article/detial/3097

Validate表单验证插件之常用参数介绍

Validate常用的一些参数和方法:errorElement,errorClass,errorPlacement,errorLabelContainer,errorContainer,wrapper,success,debug

html实现邮箱发送邮件_js发送邮件至指定邮箱功能

在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?

vue短信验证性能优化写入localstorage中

当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击;就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法

登陆时短信验证码的原理,实现

陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作,达到安全性的目的。点击获取验证码时,倒计时,暂时设定倒计时的时间为180秒....

网页如何实现拼图滑块的验证码_纯js的实现

滑动解锁应该是有两张图片,一张正常的,一张上面有解锁区域的(后端给),然后前端只用把用户释放鼠标后,滑动模块在图片上的xy轴传给后端,后端做成功与否的判断。如果只是纯前端js验证,不具备高安全性。

风火云短信验证码接收平台, 接码快速,平台稳定,简单易学

目前的社会发展得非常快,互联网产业的发展更是让很多人惊奇,平台越来越多也导致了搭载程序的要求必须高,服务平台完善性还体现于短信验证码是否具备,只有在具备的前提下才能有着更大的保证

验证码的分类_ 网页验证码有哪些方式?

早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。介绍目前常用验证码的分类有哪些:Gif动画验证码、手机短信验证码、手机语音验证码、视频验证码、滑动验证码

滑动验证码原理实现

滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低。常见验证码是需要输入图中字符的,是因为机器识别字符比较困难,以此来防止机器自动的行为。

基于react的滑动图片验证码组件

业务需求,需要在系统登陆的时候,使用“滑动图片验证码”,来验证操作的不是机器人。在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。

Vue中的验证登录状态

Vue项目中实现用户登录及token验证,先说一下我的实现步骤:使用easy-mock新建登录接口,模拟用户数据;使用axios请求登录接口,匹配账号和密码,账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!