使用node来做一个图片验证码

做一个下面的小案例，应该能够很快的理解。

首先我们需要创建一个项目。

使用express搭建一个简单的服务器。

安装express。

yarn add express

在app文件下这样配置。

const express = require('express')
const app = express()
app.use(express.static('public')) // 配置静态资源app.listen(80, () => {console.log('http://127.0.0.1')
})

下面安装svg-captcha第三方模块

yarn add svg-captcha

在app文件下配置

const express = require('express')
const svgCaptcha = require('svg-captcha')
const app = express()
app.get('/getInfo', (req, res) => {// 下面这行代码是随机生成验证码图片和文本并返回给客户端 const c = svgCaptcha.create({ size: 6, // 验证码长度ignoreChars: '0o1i', // 验证码字符中排除 0o1icolor: true, // 验证码是否有彩色noise: 1, //干扰线background: '#666' // 背景颜色})res.send(c)
})app.use(express.static('public'))
app.listen(80, () => {console.log('http://127.0.0.1')
})

上面的svgCaptcha.create(option),具体配置可在官方文档。这样基本就完成了，只需要使用ajax请求即可。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script></head><body><div id="box"></div><button id="btn">刷新</button><input type="text" id="ipt" /><span id="span"></span><script>const box = document.querySelector('#box')const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')const span = document.querySelector('#span')// 存放正确的验证码文本let validation = ''// 获取验证码图片和文本function getInfo() {$.get('http://127.0.0.1/getInfo', (res) => {// 正确验证码的信息 validation = res.text// res.data是一个验证码图片 svg标签box.innerHTML = res.data})}getInfo()btn.addEventListener('click', getInfo)ipt.addEventListener('blur', function (e) {if (this.value.toLowerCase() === validation.toLowerCase()) {span.innerHTML = '验证通过'span.style.color = 'green'} else {span.innerHTML = '验证不通过'span.style.color = 'red'}})</script></body>
</html>

最后启动服务器就可以看到效果了

node ./app.js

node实现图片验证码相关推荐

Node中实现一个简易的图片验证码流程
前言最近在实现一个登录中常见的功能:图片验证码.这个功能非常有意思,但是你说难又不会太难,简单又不会太简单.不会太难之处在于你最方便可以客户端本地存储验证码图片(不排除被打的可能),不会太简单的是要 ...
两种方式识别“传统”图片验证码
目前,很多网站为了反爬都会采取各种各样的策略,比较简单粗暴的一种做法就是图片验证码,随着爬虫技术与反爬技术的演变,目前验证码也越来越复杂,比较高端的如Google的I'm not a robot,极验 ...
java爬取验证码图片_JAVA HttpClient实现页面信息抓取(获取图片验证码并传入cookie实现信息获取)...
JAVA HttpClient实现页面信息抓取(获取图片验证码并传入cookie实现信息获取) 发布时间:2018-05-18 16:41, 浏览次数:632 , 标签: JAVA HttpClien ...
前端验证码后端返回一个图片_Web后端开发(6)——简易图片验证码的制作
大家在登录或注册某些网站的时候经常会看到一些随机的图片验证码,那么这些验证码到底是怎么制作的呢?下面我们就从最简单的制作方法中学一下验证码的制作过程. 创建图片对象要制作图片验证码,首先要创建一个图 ...
图片验证码把我逼成了人工智障
上网登录日常:请证明你不是机器人. 可一看到某些验证码,强迫症患者首先就蚌埠住了: 你说最右那俩方块我到底是选还是不选呢? 还经常会让人产生这样的思考: 红绿灯的杆子到底算不算红绿灯呢? 在终于向机器 ...
dotnet core Linux下图片验证码解决方案
dotnet core Linux下图片验证码解决方案参考文章: (1)dotnet core Linux下图片验证码解决方案 (2)https://www.cnblogs.com/xxff/p/9 ...
字符识别Python实现图片验证码识别
字符型图片验证码识别完整过程及Python实现 1 摘要验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的防火墙功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...
图片验证码的JAVA工具类
我们平时开发时经常会遇到需要图片验证码,基础的验证码包括了数字.字母.甚至可能有汉字.下面我给出一个简单的工具类. package com..ankang.tony.util;import java. ...
linux下tomcat6无法显示图片验证码少了图形插件
linux下tomcat6无法显示图片验证码(windows下显示正常) 原创 2015年10月20日 10:31:47 3526 linux下tomcat6无法显示图片验证码(windows下显示正 ...

node实现图片验证码

使用node来做一个图片验证码

node实现图片验证码相关推荐

最新文章

热门文章