限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 其它&杂项

jquery基于画布制作的字母数字验证码插件

所属分类： 网页特效-其它&杂项    2023-10-12 02:10:05

 8.5K  0  查看评论 (0)
jquery基于画布制作的字母数字验证码插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery基于画布制作的字母数字验证码插件（共3个文件）

    • index.html

使用方法

  • code
  • source
  1. ;

  2. let Captcha;

  3. (function($) {

  4.   'use strict';

  5.   const resourceUpper = ['A','B','C','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'];

  6.   const resourceLower = ['a','b','c','e','f','g','h','j','k','l','m','n','p','q','r','s','t','w','x','y','z'];

  7.   const resourceNumber = ['0','1','2','3','4','5','6','7','8','9'];

  8. 

  9.   Captcha = function(element, options) {

  10.     const self = this;

  11.     const defaults = {

  12.       length: 4,                     // 校验码长度

  13.       width: 100,                    // canvas宽度

  14.       height: 40,                    // canvas高度

  15.       font: 'bold 23px Arial',     // 文本字体样式

  16.       resourceType: 'aA0',           // 资源类型：a-小写字母、A-大写字母、0-数字，可任意组合

  17.       resourceExtra: [],             // 额外资源

  18.       clickRefresh: true,            // 点击刷新

  19.       autoRefresh: true,             // 调用校验接口后是否自动刷新（校验成功不会刷新）

  20.       caseSensitive: false,          // 大小写是否敏感

  21.     };

  22. 

  23.     self.element = element;

  24. 

  25.     self.options = $.extend(true, defaults, options);

  26. 

  27.     // 合并资源

  28.     let resource = [];

  29.     if (self.options.resourceType.length > 0) {

  30.       if (self.options.resourceType.indexOf('A') !== -1) {

  31.         resource = resource.concat(resourceUpper);

  32.       }

  33.       if (self.options.resourceType.indexOf('a') !== -1) {

  34.         resource = resource.concat(resourceLower);

  35.       }

  36.       if (self.options.resourceType.indexOf('0') !== -1) {

  37.         resource = resource.concat(resourceNumber);

  38.       }

  39.     }

  40.     if (self.options.resourceExtra.length > 0) {

  41.       resource = resource.concat(self.options.resourceExtra);

  42.     }

  43.     // 配置资源为空

  44.     if (resource.length === 0) {

  45.       resource = resourceUpper.concat(resourceLower).concat(resourceNumber)

  46.     }

  47.     self.resource = resource;

  48. 

  49.     if (self.options.clickRefresh) {

  50.       self.element.on('click', function () {

  51.           self.refresh();

  52.       });

  53.     }

  54.     self.refresh();

  55.   };

  56.   // 刷新

  57.   Captcha.prototype.refresh = function() {

  58.     const self = this;

  59. 

  60.     const canvas = self.element[0];                       // 获取canvas对象

  61.     canvas.width = self.options.width;

  62.     canvas.height = self.options.height;

  63.     const context = canvas.getContext("2d");              // 获取canvas环境

  64.     context.font = self.options.font;

  65. 

  66.     const codes = self.randomCode();

  67. 

  68.     const spaceWidth = canvas.width - context.measureText(codes.join('')).width - 40;

  69.     const wordSpace = Math.floor(spaceWidth / codes.length);

  70. 

  71.     let left = 10;

  72.     for (let i = 0; i < codes.length; i++) {

  73.       const deg = Math.random() * 30 * Math.PI / 180;     // 产生0~30之间的随机弧度

  74.       const x = left;                                     // 文本的x坐标

  75.       const y = canvas.height / 2 + Math.random()*10;     // 文本的y坐标

  76. 

  77.       context.translate(x, y);

  78.       context.rotate(deg);

  79. 

  80.       context.fillStyle = self.randomColor();

  81.       context.fillText(codes[i], 0, 0);

  82. 

  83.       context.rotate(-deg);

  84.       context.translate(-x, -y);

  85. 

  86.       left += context.measureText(codes[i]).width + wordSpace + Math.floor(Math.random()*5);

  87.     }

  88.     self.code = codes;

  89. 

  90.     const strokeLength = codes.length * Math.round(Math.random()+1) + 3;

  91.     for (let i = 0; i < strokeLength; i++) {

  92.       context.strokeStyle = self.randomColor(true);

  93.       context.beginPath();

  94.       // 显示线条

  95.       context.moveTo(Math.random() * self.options.width, Math.random() * self.options.height);

  96.       context.lineTo(Math.random() * self.options.width, Math.random() * self.options.height);

  97.       // 显示小点

  98.       const x = Math.random() * self.options.width;

  99.       const y = Math.random() * self.options.height;

  100.       context.moveTo(x, y);

  101.       context.lineTo(x + 1, y + 1);

  102.       context.stroke();

  103.     }

  104.   };

  105.   // 获取当前验证码

  106.   Captcha.prototype.getCode = function() {

  107.     return this.code.join('');

  108.   };

  109.   // 校验

  110.   Captcha.prototype.valid = function(code) {

  111.     const self = this;

  112.     let ans = false;

  113.     if (!self.options.caseSensitive) {

  114.       ans = code.toLowerCase() === self.getCode().toLowerCase();

  115.     } else {

  116.       ans = code === self.getCode();

  117.     }

  118.     if (!ans && self.options.autoRefresh) {

  119.       self.refresh();

  120.     }

  121.     return ans;

  122.   };

  123.   // 获取随机校验码

  124.   Captcha.prototype.randomCode = function() {

  125.     const self = this;

  126.     const codes = [];

  127.     const resourceLength = self.resource.length;

  128.     for (let i = 0; i < self.options.length; i++) {

  129.       const txt = self.resource[Math.floor(Math.random() * resourceLength)]; // 得到随机的一个资源码

  130.       codes.push(txt);

  131.     }

  132.     return codes;

  133.   };

  134.   // 获取随机的颜色值

  135.   Captcha.prototype.randomColor = function(alpha) {

  136.     const r = Math.round(Math.random() * 255);

  137.     const g = Math.round(Math.random() * 255);

  138.     const b = Math.round(Math.random() * 255);

  139.     if (!alpha) {

  140.       return 'rgb(' + r + ',' + g + ',' + b + ')';

  141.     }

  142.     const a = Math.random();

  143.     return 'rgb(' + r + ',' + g + ',' + b + ',' + a + ')';

  144.   };

  145. })($);

;
let Captcha;
(function($) {
  'use strict';
  const resourceUpper = ['A','B','C','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'];
  const resourceLower = ['a','b','c','e','f','g','h','j','k','l','m','n','p','q','r','s','t','w','x','y','z'];
  const resourceNumber = ['0','1','2','3','4','5','6','7','8','9'];

  Captcha = function(element, options) {
    const self = this;
    const defaults = {
      length: 4,                     // 校验码长度
      width: 100,                    // canvas宽度
      height: 40,                    // canvas高度
      font: 'bold 23px Arial',     // 文本字体样式
      resourceType: 'aA0',           // 资源类型：a-小写字母、A-大写字母、0-数字，可任意组合
      resourceExtra: [],             // 额外资源
      clickRefresh: true,            // 点击刷新
      autoRefresh: true,             // 调用校验接口后是否自动刷新（校验成功不会刷新）
      caseSensitive: false,          // 大小写是否敏感
    };

    self.element = element;

    self.options = $.extend(true, defaults, options);

    // 合并资源
    let resource = [];
    if (self.options.resourceType.length > 0) {
      if (self.options.resourceType.indexOf('A') !== -1) {
        resource = resource.concat(resourceUpper);
      }
      if (self.options.resourceType.indexOf('a') !== -1) {
        resource = resource.concat(resourceLower);
      }
      if (self.options.resourceType.indexOf('0') !== -1) {
        resource = resource.concat(resourceNumber);
      }
    }
    if (self.options.resourceExtra.length > 0) {
      resource = resource.concat(self.options.resourceExtra);
    }
    // 配置资源为空
    if (resource.length === 0) {
      resource = resourceUpper.concat(resourceLower).concat(resourceNumber)
    }
    self.resource = resource;

    if (self.options.clickRefresh) {
      self.element.on('click', function () {
          self.refresh();
      });
    }
    self.refresh();
  };
  // 刷新
  Captcha.prototype.refresh = function() {
    const self = this;

    const canvas = self.element[0];                       // 获取canvas对象
    canvas.width = self.options.width;
    canvas.height = self.options.height;
    const context = canvas.getContext("2d");              // 获取canvas环境
    context.font = self.options.font;

    const codes = self.randomCode();

    const spaceWidth = canvas.width - context.measureText(codes.join('')).width - 40;
    const wordSpace = Math.floor(spaceWidth / codes.length);

    let left = 10;
    for (let i = 0; i < codes.length; i++) {
      const deg = Math.random() * 30 * Math.PI / 180;     // 产生0~30之间的随机弧度
      const x = left;                                     // 文本的x坐标
      const y = canvas.height / 2 + Math.random()*10;     // 文本的y坐标

      context.translate(x, y);
      context.rotate(deg);

      context.fillStyle = self.randomColor();
      context.fillText(codes[i], 0, 0);

      context.rotate(-deg);
      context.translate(-x, -y);

      left += context.measureText(codes[i]).width + wordSpace + Math.floor(Math.random()*5);
    }
    self.code = codes;

    const strokeLength = codes.length * Math.round(Math.random()+1) + 3;
    for (let i = 0; i < strokeLength; i++) {
      context.strokeStyle = self.randomColor(true);
      context.beginPath();
      // 显示线条
      context.moveTo(Math.random() * self.options.width, Math.random() * self.options.height);
      context.lineTo(Math.random() * self.options.width, Math.random() * self.options.height);
      // 显示小点
      const x = Math.random() * self.options.width;
      const y = Math.random() * self.options.height;
      context.moveTo(x, y);
      context.lineTo(x + 1, y + 1);
      context.stroke();
    }
  };
  // 获取当前验证码
  Captcha.prototype.getCode = function() {
    return this.code.join('');
  };
  // 校验
  Captcha.prototype.valid = function(code) {
    const self = this;
    let ans = false;
    if (!self.options.caseSensitive) {
      ans = code.toLowerCase() === self.getCode().toLowerCase();
    } else {
      ans = code === self.getCode();
    }
    if (!ans && self.options.autoRefresh) {
      self.refresh();
    }
    return ans;
  };
  // 获取随机校验码
  Captcha.prototype.randomCode = function() {
    const self = this;
    const codes = [];
    const resourceLength = self.resource.length;
    for (let i = 0; i < self.options.length; i++) {
      const txt = self.resource[Math.floor(Math.random() * resourceLength)]; // 得到随机的一个资源码
      codes.push(txt);
    }
    return codes;
  };
  // 获取随机的颜色值
  Captcha.prototype.randomColor = function(alpha) {
    const r = Math.round(Math.random() * 255);
    const g = Math.round(Math.random() * 255);
    const b = Math.round(Math.random() * 255);
    if (!alpha) {
      return 'rgb(' + r + ',' + g + ',' + b + ')';
    }
    const a = Math.random();
    return 'rgb(' + r + ',' + g + ',' + b + ',' + a + ')';
  };
})($);

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： bootstrapcaptcha验证码js随机码数字字母
相关资源 / 其它&杂项
查看更多

jquery支持高亮标红显示的模糊查询插件

 一个轻量级的模糊搜索插件，input文本框输入关键词回车，自动查找并显示匹配结果，并且高亮标红关键字。
  其它&杂项
 2355  0

jquery支持按住Shift键来选择连续的复选框数据插件

 一款table表格支持shift键多选插件，可通过按住Shift键并单击相关的复选框来选择/取消选择table表格中的多行。
  其它&杂项
 8360  0

jquery页面底部cookie操作使用通知消息栏插件

 一款网页底部cookie使用通知同意特效，鼠标点击同意接受cookie后，记录到cookie当中，再次访问不再显示。
  其它&杂项
 5396  0

jquery表格table数据行实现不同背景色特效插件

 一款bootstrap框架表格数据行背景色插件，可自定义设置指定tr，很实用！
  其它&杂项
 3392  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论