javascript 生成验证码图片

在网站登录、注册等场景中，我们经常需要验证用户输入的有效性。常见的一种验证方式是生成验证码图片，要求用户输入显示在图片上的验证码才能进行下一步操作。

使用 Javascript 可以方便地实现验证码图片的生成。下面通过一个例子来演示如何使用 Javascript 生成验证码图片：

<canvas id="canvas"  ></canvas><button onclick="generateCode()">生成验证码</button><input type="text" id="inputCode"><button onclick="validateCode()">验证</button><script>var code;var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');function generateCode() {code = "";var codeLength = 4; //验证码长度var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; //验证码字符集for (var i = 0; i< codeLength; i++) {var charIndex = Math.floor(Math.random() * codeChars.length);code += codeChars[charIndex];}drawCode();}function drawCode() {context.clearRect(0, 0, canvas.width, canvas.height);context.font = "30px Arial";context.fillText(code, 25, 35); //绘制验证码}function validateCode() {var input = document.getElementById('inputCode').value;if (input === code) {alert('验证码正确');} else {alert('验证码错误');}}</script>

上面的代码包含了一个用 Canvas 绘制验证码图片的完整实现。先在 HTML 中定义一个用于显示验证码的 Canvas 元素，并绑定两个按钮的点击事件。

在 JavaScript 中，定义了三个函数：generateCode、drawCode 和 validateCode，分别用于生成验证码、绘制验证码，以及验证用户输入的验证码是否正确。

generateCode 函数首先将验证码长度和字符集定义好，然后用循环方式随机生成 codeLength 个字符，并拼接成完整的验证码字符串。注意，代码中使用 Math.random 函数来随机生成字符序号，Math.floor 函数用于向下取整。

接着在 drawCode 函数中，调用 Canvas 的 clearRect 方法清空画布，设置字体大小和颜色，然后调用 fillText 方法将验证码绘制在 Canvas 上。

最后，在 validateCode 函数中，获取用户输入的验证码，与之前生成的验证码进行比对，如果相同则弹出正确提示，否则弹出错误提示。

整个过程有点类似于人为绘制验证码图片的过程，只不过使用了 JavaScript 自动化实现。

除了 Canvas，还可以使用 CSS3 的背景渐变和旋转等样式，将验证码样式制作得更加丰富多彩。这里只列出一个示例：

<div id="code"><span >1</span><span >2</span><span >3</span><span >4</span><span >5</span><span >6</span></div><button onclick="generateCode()">生成验证码</button><input type="text" id="inputCode"><button onclick="validateCode()">验证</button><style>#code {display: flex;justify-content: center;align-items: center;height: 50px;}#code span {margin: 0 5px;font-size: 30px;}.rotate {transform: rotate(8deg);}.gradient {background: linear-gradient(to right, #ff6666, #ffcc66);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style><script>var code;function generateCode() {code = "";var codeLength = 4; //验证码长度var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; //验证码字符集for (var i = 0; i< codeLength; i++) {var charIndex = Math.floor(Math.random() * codeChars.length);code += codeChars[charIndex];}drawCode();}function drawCode() {var codeDiv = document.getElementById('code');var spanList = codeDiv.getElementsByTagName('span');for (var i = 0; i< spanList.length; i++) {var span = spanList[i];span.className = (i % 2 === 0 ? 'rotate' : 'gradient');span.textContent = code.charAt(i);}}function validateCode() {var input = document.getElementById('inputCode').value;if (input === code) {alert('验证码正确');} else {alert('验证码错误');}}</script>

在这个示例中，使用一个 div 容器包含了多个 span 元素，每个 span 元素显示一个字符。接着使用 CSS3 的 transform 属性为偶数位置的字符元素添加旋转效果，使用 linear-gradient 属性为奇数位置的字符元素添加背景渐变效果。

在绘制验证码时，只需获取所有的 span 元素，按照验证码字符串的顺序对 span 元素进行样式设置和字符填充即可。

这种方式相比 Canvas 更加简单、易于实现，也更易于使用 CSS 精细调整验证码的样式。

免责声明：本文内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请核实广告和内容真实性，谨慎使用。