【前端OCR】代码,浏览器实现简单OCR识别,tesseract.js
tesseract
tesseract-ocr/tesseract: 是一个开源的光学字符识别(OCR)引擎,适用于从图像中提取和识别文本。特点是可以识别多种语言,具有较高的识别准确率,并且支持命令行和API调用。
项目地址:https://gitcode.com/gh_mirrors/te/tesseract
免费下载资源
·
【需求背景】灵机一动想到能否在浏览器实现OCR,查阅资料后发现可参考内容不多,故给出以下可运行代码。
【使用方法】代码可以在本地编辑器编辑完成后使用浏览器直接打开HTML文件,选择图片上传即可。
【说明】当前配置是简体中文语言包chi_sim,如果需要切换其它语言可以参考官方Github仓库tesseract.js/src/constants/languages.js中的说明。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像OCR Tesseract.js 测试</title>
<script src="https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js"></script>
</head>
<body>
<input type="file" id="imageInput" accept="image/*">
<img id="uploadedImage" style="max-width: 100%; margin-top: 10px; display: none;">
<div id="result"></div>
<script>
document.getElementById('imageInput').addEventListener('change', function (e) {
var file = e.target.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
document.getElementById('uploadedImage').src = image.src;
document.getElementById('uploadedImage').style.display = 'block';
Tesseract.recognize(
image,
'chi_sim',
{
logger: info => console.log(info)
}
).then(result => {
console.log('【识别结果】', result);
if (result && result.text) {
document.getElementById('result').innerText = result.text;
} else {
console.error('【错误】无法从识别结果中检索文本');
}
}).catch(error => {
console.error('【错误】识别过程中出错,原因:', error);
});
};
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
GitHub 加速计划 / te / tesseract
60.1 K
9.29 K
下载
tesseract-ocr/tesseract: 是一个开源的光学字符识别(OCR)引擎,适用于从图像中提取和识别文本。特点是可以识别多种语言,具有较高的识别准确率,并且支持命令行和API调用。
最近提交(Master分支:21 天前 )
bc490ea7
Don't check for a directory, because a symbolic link is also allowed.
Signed-off-by: Stefan Weil <sw@weilnetz.de>
2 个月前
2991d36a - 2 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)