【node】图片验证码(svg-captcha)

新建 temp文件夹

在这里插入图片描述

生成package.json文件

使用vscode打开temp文件夹,并在终端输入命令npm init -y 并回车生成package.json文件

在这里插入图片描述

安装依赖

npm i svg-captcha -S

新建index.js文件

复制下面代码

// 引入svg-captcha
const svgCaptcha = require("svg-captcha");

// 生成验证码
const captcha = svgCaptcha.create({
  size: 3, // 字符数
  ignoreChars: "zxcvbnmasdfghjklqwertyuiop", // 过滤字符
  noise: 3, // 干扰线条数
  color: true,
  background: "#fff", // 背景颜色
});

// captcha 是个对象,text是验证码文字,data是验证码
console.log(captcha);

终端输入命令node index.js运行
这个时候验证码还只能打印出来,看不到

创建http服务

完整代码

// 引入svg-captcha
const svgCaptcha = require("svg-captcha");
const http = require("http");

const server = http.createServer((req, res) => {
  // req 是请求  res是响应
  const captcha = svgCaptcha.create({
    size: 3, // 字符数
    ignoreChars: "zxcvbnmasdfghjklqwertyuiop", // 过滤字符
    noise: 3, // 干扰线条数
    color: true,
    background: "#fff", // 背景颜色
  });

  // 需要加请求头否则不能显示,请求头可以设置为两种,第二种后端常用
    res.setHeader("content-type", "text/html;charset=utf-8;");
//   res.setHeader("content-type", "image/svg+xml;");
  res.end(captcha.data);
});

// 设置一个没有使用的端口号,如果报错尝试换个端口号
server.listen(3003, () => {
  console.log("启动成功,http://localhost:3003");
});

终端输入命令node index.js运行
浏览器访问查看效果

效果

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46123200/article/details/131249741
今日推荐