Javascript验证码绘制下载

article/2025/11/6 0:46:26

1. 网页标签为图片格式

1.1 先观察以下网页启信宝, 此网页有多种验证方式随机变化, 这里只考虑下面的情况的验证码:

1.2 这里使用js创建画布, 并根据页面验证码标签信息进行原样绘制, 具体方法如下:

var canvas = document.createElement("canvas");    // 创建画布
var image = document.querySelector(".geetest_item_img");  // 查找元素// 此句为可选, 一般不加, 但此页面的图片对于当前画布来说是外部来源的图片, 若不加此句, 画布会因为外部未知源的图片而污染, 从而报错。
// 详情参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
image.setAttribute('crossOrigin', 'anonymous');    // 设置画布大小和图片大小一致
// (注: 会存在验证码图片元素大小和图片实际大小不一致, 导致保存图片缺失, 这时需要查看图片实际尺寸并直接给画布大小赋值)
canvas.width = image.width;  
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0); // 画图// 得到base64格式数据, 并删除开头的 "data:image/png;base64," 字段(注: 此字段可能不完全一样, 需要在替换前根据实际情况判断), 
// 得到的base64字符串就可以使用k-rpa系统上的 "Base64文本转文件" 函数转化为图片
canvas.toDataURL().replace("data:image/png;base64,", ""); 

2. 网页验证码标签为非图片格式(SVG绘制) 

2.2 方法如下,参考: javascript - Convert SVG to image (JPEG, PNG, etc.) in the browser - Stack Overflow

var canvas = document.createElement('canvas');   // 创建画布
var viewBox = document.querySelector("svg").getAttribute("viewBox").split(" ");// 获取验证码属性, 得出验证码大小
canvas.width = viewBox[2];   // 根据验证码大小设置画布大小
canvas.height = viewBox[3];
var ctx = canvas.getContext('2d');   // 创建二维渲染上下文
var paths = document.querySelectorAll("svg > path[fill^='#']");  // 获取绘制验证码所有字符的path(此处过滤了干扰线条)
for (var i=0;i<paths.length;i++){var svgText = paths[i].getAttribute("d");  // 获取path绘制信息var p = new Path2D(svgText);  // 根据绘制信息创建Path2D, 可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D/Path2Dctx.stroke(p);   // 描边
}// 方法1: 生产base64链接, 再根据此链接转化成图片文件
canvas.toDataURL().replace("data:image/png;base64,", ""); // 方法2: 创建元素点击下载并弹窗
// var a = document.createElement('a')
// a.href = canvas.toDataURL('image/png')
// a.download = "验证码";  // 下载名称
// a.click(); // 点击下载

以下是得到的验证码图片, 可见此方法不仅正确获取到了验证码图片, 还过滤了其中的干扰线条:

 

 


http://chatgpt.dhexx.cn/article/tu3JUJj6.shtml

相关文章

JavaScript案例之使用验证码进行简单判断

JavaScript案例之使用验证码进行简单判断 源代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><div id"checkCode"style"width: 150px;height…

html实现验证码效果,js实现验证码功能

本文实例为大家分享了js实现验证码功能的具体代码,供大家参考,具体内容如下 #前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面 首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮 提交 然后加一些样式 input {width: 150px; height: 3…

CheckCode.js 前端验证码插件

CheckCode.js 前端验证码插件 效果截图插件使用方法CheckCode.js本插件的参考示例 效果截图 插件使用方法 // 在html页面引入CheckCode.js <script src"CheckCode.js"></script> //定义 <script>let checkCode new CheckCode({id:"code&quo…

JS 验证码生成及校验(详细注释)

这是个非常简单的(粗糙)模拟验证码生成及校验的小案例&#xff0c;只简单的实现下功能&#xff0c;后续希望可以做验证码背景是有颗粒的&#xff0c;同时有干扰线...更符合实际场景的验证码生成及校验。 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"…

【JavaScript】手机验证码倒计时

手机验证码倒计时 样式 点击“发送手机验证码”开启倒计时&#xff1a; 开启倒计时后&#xff0c;再次点击不会发起再次请求&#xff1a; index.vue <p class"title"><span class"required">*</span><span>手机号验证&#…

纯js验证码

效果图&#xff1a; 源代码&#xff1a; <!DOCTYPE html> <html> <!-- head --> <head><title>js验证码</title><script type"text/javascript">/* 定义全局变量用以获取得到的验证码*/ var verification_code []; dra…

Javascript验证码的生成和验证,源代码

如果有幸被那位大神看见希望可以为我指出下面的问题&#xff0c; 我是一个前端白小白&#xff0c;刚开始学和记录自己感觉不错的小项目&#xff0c;各位大神有好的方法或者更好的写法可以指点一二&#xff0c;写不好的时候随便喷 我想看一下我潜力到底有多大。 <!DOCTYPE h…

JavaScript验证码

验证码在生活中很常见&#xff0c;所以做了个验证码案例&#xff1a; 感觉蛮简单的&#xff0c;就不解释了&#xff0c;代码里有注释&#xff0c;如下&#xff1a; var span document.getElementsByTagName(span)[0];var a document.getElementsByTagName(a)[0];var input …

JavaScript验证码示例

In this tutorial you will get JavaScript captcha example. 在本教程中&#xff0c;您将获得JavaScript验证码示例。 Captcha is used to determine whether or not the user that is filling and submitting a web form is human. While developing web projects we often …

js验证码插件

文章目录 1、gVerify插件1.1 源代码1.2 属性及方法1.3 使用 2、vue-puzzle-vcode插件2.1 安装2.2 参数与事件2.3 使用 3、vue2-verify3.1 安装3.2 参数3.3 使用 4、vue-monoplasty-slide-verify4.1 安装4.2 引入4.3 参数与事件4.4 使用 1、gVerify插件 &#xff08;常规验证码…

前端-js 验证码

html 代码 js 代码 // 存放随机的验证码 var showNum []; draw(showNum); // 封装一个把随机验证码放在画布上 function draw(showNum) { // 获取canvas var canvas document.querySelector("#cl"); console.log(canvas) var ctx canvas.getContext(&quo…

js案例---验证码

我们在进行注册与登录时&#xff0c;常常会有验证码的使用&#xff0c;今天我们来用js实现验证码的功能 我们先写网页的样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册表</title>&l…

暑期学习日记27:js实现验证码生成与检验

今日学习了验证码的生成与检验&#xff0c;逻辑为&#xff1a; 1.加载页面时自动随机生成数字验证码。 2.点击看不清&#xff0c;更换验证码重新生成验证码。 3.点击确定按钮检验输入框内的值与验证码是否相等&#xff0c;不相等时弹出警告并清空输入框和刷新验证码。 代码…

js学习--验证码的实现

1.使用p标签创建存放验证码&#xff0c;并通过css设置p标签的样式。 <p>点击获取验证码</p>p {width: 120px;height: 50px;border: 1px solid;text-align: center;line-height: 50px;} 2.设置script标签&#xff0c;在标签内实现验证码功能。 2.1 获取元素标签。…

js简单验证码的生成和验证

如何用js生成简单验证码&#xff0c;并验证是否正确的方法 1、html页面如下 <div><table border"0" cellspacing"5" cellpadding"5" ><tr><td> <div id"checkCode" class"code" onclick"…

IDEA控制台字体大小设置

进入如下图所示设置&#xff0c;调整size

IDEA修改字体及大小

1.设置→编辑器→颜色和字体→Font&#xff0c;方案“Default”点击“另存为”&#xff0c;点击“确定”。 2.之后便可以修改字体样式及大小&#xff0c;点击“确定”。

Intellij IDEA 字体大小设置

场景 由于种种原因&#xff0c;对种种&#xff0c;字体看着或大或小&#xff0c;需要我们调整整一下下&#xff0c;这样写代码也会更加的舒爽一些。 设置方法 File——>Settings——>Editor——>Font

IDEA中修改字体大小无效的问题

在IDEA中我将字体从12改成22后&#xff0c;界面显示的字体没有变化&#xff0c;进一步了解发下。 我设置的字体大小和主题中的字体有冲突导致的&#xff0c;进入主题后&#xff0c;进行修改字体大小&#xff0c;问题解决。

IDEA--字体大小设置

IDEA版本&#xff1a; 2019.3.3 字体 一、界面字体 File -> Settings Appearance & Behavior -> Appearance 二、程序字体 Editor -> Colors & Fonts -> Font