使用 JavaScript (Tesseract.js) 实现验证码图片识别

最新推荐文章于 2026-03-23 00:40:51 发布

原创最新推荐文章于 2026-03-23 00:40:51 发布 · 1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#arcgis

步骤
引入 Tesseract.js：
可以通过 CDN 或者 NPM 来引入 Tesseract.js 库。
图像处理：
JavaScript 本身可以通过 <canvas> 元素进行基本的图像处理，处理后再进行识别。
OCR 识别：
使用 Tesseract.js 识别验证码图片中的文本。
HTML 和 JavaScript 示例
我们将构建一个简单的 HTML 页面，允许用户上传验证码图片，并利用 Tesseract.js 来进行 OCR 识别。

HTML 页面（用于上传图片并展示识别结果）
html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码识别</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.0/dist/tesseract.min.js"></script>
</head>
<body>
<h1>验证码图片识别</h1>

<input type="file" id="captcha-file" accept="image/*">

<br><br>


<h3>识别结果：</h3>
<p id="result"></p>

<script>
// 选择文件后触发识别
document.getElementById('captcha-file').addEventListener('change', function(event) {
const file = event.target.files[0];

if (file) {
const reader = new FileReader();

reader.onload = function(e) {
const image = new Image();
image.onload = function() {
// 调用识别函数
recognizeCaptcha(image);
};
image.src = e.target.result;
};

reader.readAsDataURL(file);
}
});

// 识别图片中的文字
function recognizeCaptcha(image) {
// 使用 Tesseract.js 识别图片
Tesseract.recognize(
image,
'eng', // 语言选择，'eng'为英文
{
logger: info => console.log(info) // 用于显示进度日志
}
).then(({ data: { text } }) => {
// 显示识别结果
document.getElementById('result').innerText = text.trim();
}).catch(error => {
console.error('识别失败:', error);
});
}
</script>
</body>
</html>

代码解析
图片上传：

我们使用了 <input type="file"> 元素来允许用户上传图片。
当文件选择框的内容发生变化时，我们读取文件并加载为图像。
Tesseract.js 识别：

Tesseract.recognize() 方法用来识别图像中的文字。
'eng' 指定我们使用英文语言模型进行 OCR 识别。你可以选择其他语言模型，或者使用多语言模式。
logger 是一个进度回调函数，用于在识别过程中打印进度信息。
显示识别结果：

识别完成后，我们将识别到的文本显示在网页中。
运行方法
将上面的 HTML 内容保存为 index.html。
用浏览器打开这个 HTML 文件。
上传一张验证码图片，JavaScript 会调用 Tesseract.js 识别图像中的文字，并在页面上显示识别结果。
优化与改进
图像预处理：

在实际应用中，验证码图片通常会有噪点或干扰，直接识别可能会失败。你可以使用 Canvas 对图片进行一些基本的处理（如灰度化、二值化、去噪等），提高识别的准确性。
javascript

function preprocessImage(image) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 的宽高
canvas.width = image.width;
canvas.height = image.height;

// 绘制图像到 canvas
ctx.drawImage(image, 0, 0);

// 图像处理（例如灰度化、阈值化）
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

// 灰度化处理
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];

const gray = 0.3 * r + 0.59 * g + 0.11 * b;
data[i] = data[i + 1] = data[i + 2] = gray; // 设置为灰度值
}

ctx.putImageData(imageData, 0, 0);
  更多内容访问ttocr.com或联系1436423940
return canvas;
}
多语言支持：

Tesseract.js 支持多语言。如果你识别的验证码包含其他语言的字符（例如中文），你可以通过加载不同的语言包来提升识别效果。
javascript

Tesseract.recognize(
image,
'chi_sim', // 中文简体
{ logger: info => console.log(info) }
)