识别图形验证码

ctaohua

已于 2024-07-23 11:18:05 修改

阅读量206

点赞数

文章标签： javascript

于 2023-06-21 14:58:24 首次发布

本文链接：https://blog.youkuaiyun.com/ttaohua/article/details/131327954

版权

该代码段展示了一个JavaScript功能，用于获取验证码图片的base64编码，并通过AJAX发送到服务器进行识别。当输入框获得焦点或图片加载后，会触发验证码的获取和识别过程，识别结果将填充到验证码输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动识别验证码，并填充到输入孔

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;
}