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

简介: 【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运行

浏览器访问查看效果

效果

 

目录
相关文章
|
5月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
143 0
|
23天前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
24 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
9天前
|
数据采集 自然语言处理 Python
用 Python 生成并识别图片验证码
用 Python 生成并识别图片验证码
15 1
|
23天前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
29 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
23天前
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
42 0
|
4月前
|
前端开发 JavaScript 数据库
四. Django项目之电商购物商城 -- 图片验证码生成
四. Django项目之电商购物商城 -- 图片验证码生成
|
4月前
|
数据采集 存储 编解码
技术笔记:Node.jsmm131图片批量下载爬虫1.01增加断点续传功能
技术笔记:Node.jsmm131图片批量下载爬虫1.01增加断点续传功能
44 0
|
4月前
|
数据采集 Web App开发 XML
详尽分享用Node.js写爬虫,撸羞羞的图片
详尽分享用Node.js写爬虫,撸羞羞的图片
32 0
|
4月前
图片验证码制作(附源码)
图片验证码制作(附源码)