【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运行
浏览器访问查看效果

效果

在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fruge365

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值