自动识别验证码,并填充到输入孔
1. 获取验证码图片
验证码链接会随机生成不同的图片,所以得获取当前显示的图片信息(base64)
$(function() {
bind_input_change();
});
// 绑定切换事件
function bind_input_change() {
$('input[name="captcha"]').on('focus',function() {
get_captcha();
});
// 验证码加载后自动识别
$($('.captcha')[1]).load(function(){
get_captcha();
});
}
// 获取验证码
function get_captcha() {
$.ajax({
method: 'post',
url: 'http://127.0.0.1:8000/',
data: {
base64: get_image_base64()
},
success: function(res) {
console.log('验证码识别成功', res);
$('input[name="captcha"]').val(res)
},
error: function(res) {
console.log('验证码识别失败', res)
}
});
}
// 获取图片base64
function get_image_base64() {
// 获取当前图片链接
let url = $($('.captcha')[1]).attr('src');
let image = new Image();
image.src = url;
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
let base64 = canvas.toDataURL("image/" + ext);
//global_image_base64 = base64
return base64;
}