Javascript验证码绘制下载

Gavin_Hall

已于 2022-04-02 22:08:41 修改

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-04-02 22:05:42 首次发布

本文链接：https://blog.csdn.net/kyven_he/article/details/123930059

版权

本文介绍了如何使用JavaScript处理网页上的验证码，包括将验证码图片标签内容原样绘制到canvas上，并提供了将SVG验证码转换为图片的方法，有效过滤干扰线条。

摘要由CSDN通过智能技术生成

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); // 画图

// 得到base6