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(); // 点击下载
以下是得到的验证码图片, 可见此方法不仅正确获取到了验证码图片, 还过滤了其中的干扰线条:



















