Nodejs 用canvas写的一个随机验证码生成器小模块

Nodejs 用canvas写的一个随机验证码生成器小模块

###Install

npm install verify-code

###Usage

var verifyCode = require('verify-code');
var result = verifyCode.Generate();
var vcode = result.code;
var imgDataURL = result.dataURL;

<img src="imgDataURL">

###Example example


6 回复

Nodejs 用canvas写的一个随机验证码生成器小模块

安装

首先，你需要安装 verify-code 模块。你可以通过以下命令来安装：

npm install verify-code

使用

安装完成后，你可以使用该模块来生成验证码。以下是基本的使用方法：

var verifyCode = require('verify-code');
var result = verifyCode.Generate();
var vcode = result.code; // 验证码字符串
var imgDataURL = result.dataURL; // 图片的 Data URL

你可以在 HTML 中直接展示这个图片：

<img src="data:image/png;base64,{{imgDataURL}}">

这里假设 imgDataURL 是一个 Base64 编码的 PNG 图片。

示例

下面是一个完整的示例，展示了如何生成并显示验证码：

生成验证码的 Node.js 脚本 (generate.js)

const express = require('express');
const verifyCode = require('verify-code');
const app = express();

app.get('/captcha', (req, res) => {
    const result = verifyCode.Generate();
    res.json({
        code: result.code,
        dataURL: result.dataURL
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Captcha Example</title>
</head>
<body>
    <h1>验证码示例</h1>
    <div id="captcha-container">
        <img id="captcha-image" src="" alt="Captcha Image">
        <button onclick="refreshCaptcha()">刷新验证码</button>
    </div>

    <script>
        function refreshCaptcha() {
            fetch('/captcha')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('captcha-image').src = 'data:image/png;base64,' + data.dataURL;
                    document.getElementById('captcha-code').innerText = data.code;
                });
        }

        // 初始加载时刷新一次验证码
        refreshCaptcha();
    </script>
</body>
</html>

说明

  1. 生成验证码: 在 Node.js 服务器中，我们创建了一个简单的 Express 应用，提供一个 /captcha 的路由来生成验证码，并返回 JSON 数据。
  2. 前端展示: 在前端页面中，我们通过 fetch 请求从服务器获取验证码数据，并将图片显示在页面上。同时，按钮可以用来刷新验证码。

这样，你就可以在 Node.js 中使用 canvas 来生成并展示随机验证码了。


Caught exception: Error: Cannot find module ‘…/build/Release/canvas’ 有这个错误，是不是因为没有下载完全

现在安装成功了，但是运行又有错误了，我是在Windows环境下的 QQ图片20140922132755.jpg 请问这是什么原因了

Caught exception: Error: The specified module could not be found. e:\diysdk\server\web\node_modules\verify-code\node_modules\canvas\build\Release\canvas.node

很好的模块，正需要用呢！收藏了！

Nodejs 用canvas写的一个随机验证码生成器小模块

安装

你可以通过 npm 安装 verify-code 模块：

npm install verify-code

使用

首先需要引入 verify-code 模块，并调用其 Generate() 方法来生成验证码。这个方法会返回一个对象，包含生成的验证码字符串 (code) 和一个 Data URL 形式的图片数据 (dataURL)。

var verifyCode = require('verify-code');
var result = verifyCode.Generate();
var vcode = result.code;    // 验证码字符串
var imgDataURL = result.dataURL;    // 图片 Data URL

为了展示验证码图片，你可以将其嵌入到 HTML 的 <img> 标签中：

<img src="imgDataURL">

示例

生成的验证码图片类似于：

example

这段代码可以用于生成随机的验证码，并以图像的形式显示出来，用户可以通过输入验证码来进行验证。

回到顶部