极简原生js图形验证码

前天接到需求要在老项目登陆界面加上验证码功能,因为是内部项目且无需短信验证环节,那就直接用原生js写一个简单的图形验证码。

示例:

思路:此处假设验证码为4位随机数值,数值刷新满足两个条件①页面新进/刷新。②点击图片刷新。(实际情况下还要考虑登录出错刷新,此处只做样式不写进去) 实现过程为1.先写一个canvas标签做绘图容器。 → 2.将拿到的值绘制到容器中并写好样式。 → 3.点击刷新重新绘制。

写一个canvas标签当容器

html 复制代码
<canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>

并设置容器宽高背景颜色或图片等样式

写一个数值绘制到canvas的方法

js 复制代码
//text为传递的数值
function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 设置字体及大小
      ctx.font = '100px Comic Sans MS';
      // 设置字体颜色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整文字图形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 调整阴影范围
      ctx.shadowBlur = Math.random() * 20;
      // 调整阴影颜色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整阴影位置(偏移量)
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 绘制文字图形及其偏移量
      ctx.fillText(text, 25, 35);
      // 绘制文字边框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

拿到数值调用绘制方法

此处为样式示例,因此数值我用4位随机数表示,实际情况为你从后端取得的值,并依靠这个值在后端判断验证码是否一致。

js 复制代码
// 调用函数生成验证码并显示在页面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });

监听标签点击实现点击刷新

此处要注意一定要先清空canvas中已绘制图像再渲染新数值,因此直接将清除范围设置较大。

js 复制代码
 // 监听点击更新验证码
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空画布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 调用函数生成验证码并显示在页面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

最后实现效果:

完整代码演示

html 复制代码
<!DOCTYPE html>
<html>

<head>
  <title>String to Captcha</title>
</head>

<body>
  <canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>


  <script>
    // 监听点击更新验证码
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空画布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 调用函数生成验证码并显示在页面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

    function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 设置字体及大小
      ctx.font = '100px Comic Sans MS';
      // 设置字体颜色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整文字图形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 调整阴影范围
      ctx.shadowBlur = Math.random() * 20;
      // 调整阴影颜色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整阴影位置(偏移量)
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 绘制文字图形及其偏移量
      ctx.fillText(text, 25, 35);
      // 绘制文字边框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

    // 调用函数生成验证码并显示在页面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
  </script>
</body>

</html>
相关推荐
前端极客探险家14 分钟前
如何用 Three.js 和 Vue 3 实现 3D 商品展示
javascript·vue.js·3d
我是小路路呀1 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
我自纵横20231 小时前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li1 小时前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
记得早睡~9 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
拉不动的猪11 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya11 小时前
react redux的学习,单个reducer
前端·javascript·react.js
加瓦点灯11 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin12 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan13 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单