Nodejs PNG图片验证码生成 pure javascript no C/C++

Node.js PNG 图片验证码生成 (Pure JavaScript, No C/C++)

摘要

本文介绍如何使用纯JavaScript实现一个简单的PNG图片验证码生成器。我们将利用Node.js环境和一些现有的库来完成这项任务。

示例代码

首先，我们需要安装必要的依赖包。这里我们使用canvas库来创建和处理图像，以及express作为Web服务器。

npm install express canvas

接下来，创建一个基本的Express应用，并编写生成验证码的逻辑。

const express = require('express');
const { createCanvas, loadImage } = require('canvas');
const app = express();
const port = 3000;

app.get('/captcha', (req, res) => {
    const width = 100;
    const height = 40;
    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext('2d');

    // 设置背景颜色
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, width, height);

    // 生成随机验证码字符串
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let captchaText = '';
    for (let i = 0; i < 6; i++) {
        captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
    }

    // 设置字体样式
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 随机旋转角度
    const angle = Math.random() * 20 - 10;

    // 绘制每个字符
    for (let i = 0; i < captchaText.length; i++) {
        ctx.save();
        ctx.translate(10 + i * 15, height / 2);
        ctx.rotate((Math.PI / 180) * angle);
        ctx.fillStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
        ctx.fillText(captchaText[i], 0, 0);
        ctx.restore();
    }

    // 添加干扰线
    for (let i = 0; i < 4; i++) {
        ctx.beginPath();
        ctx.moveTo(Math.random() * width, Math.random() * height);
        ctx.lineTo(Math.random() * width, Math.random() * height);
        ctx.strokeStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
        ctx.stroke();
    }

    // 将canvas转换为Buffer对象
    const buffer = canvas.toBuffer('image/png');

    // 设置响应头并返回验证码图片
    res.setHeader('Content-Type', 'image/png');
    res.send(buffer);
});

app.listen(port, () => {
    console.log(`Captcha server listening at http://localhost:${port}`);
});

解释

1. 创建Canvas: 使用createCanvas函数创建一个指定宽度和高度的画布。
2. 设置背景: 使用fillStyle和fillRect方法设置画布背景色。
3. 生成验证码文本: 随机生成一段由大写字母、小写字母和数字组成的验证码文本。
4. 绘制文字: 使用font, textAlign, textBaseline属性设置字体样式，然后使用rotate方法随机旋转每个字符的角度，并填充文字。
5. 添加干扰线: 使用beginPath, moveTo, lineTo, stroke等方法随机绘制几条干扰线。
6. 输出验证码: 最后将画布转换为Buffer对象，并通过HTTP响应返回。

总结

通过上述步骤，我们可以使用纯JavaScript（借助canvas库）在Node.js中生成PNG格式的验证码图片。这种方式无需依赖任何C/C++扩展，适合于需要快速实现验证码功能的项目。