<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://unpkg.com/tesseract.js@v2.0.0-beta.1/dist/tesseract.min.js'></script>
</head>
<body>
<img src="a1.png" id="img" style="width: 400px; height: auto;">
<button onclick="start()">识别文字</button>
<div id="content" contenteditable="true"></div>
<input type="file" id="uploader">
<script>
async function start () {
const img = document.getElementById('img')
const content = document.getElementById('content')
const { data: { text } } = await Tesseract.recognize(img, 'chi_sim', {
langPath: '',
logger: m => console.log(m),
})
content.innerText = text
}
// 获取文件上传输入框元素
let uploader = document.getElementById("uploader")
let file = ''
// 绑定change事件监听器
uploader.addEventListener("change", function (event) {
// 获取所选择的文件
file = event.target.files[0]
// 在这里可以执行你希望处理的操作,比如读取文件内容、上传文件等
recognize()
})
const recognize = async () => {
const { data: { text } } = await Tesseract.recognize(file, 'chi_sim', {
langPath: '',
logger: m => console.log(m)
})
content.innerText = text
}
</script>
</body>
</html>
下载chi_sim.traineddata.gz,配置langPath:' ',访问速度会快
https://raw.githubusercontent.com/naptha/tessdata/gh-pages/4.0.0_fast/chi_sim.traineddata.gz
实现效果