1、引入资源
通过链接引用
<script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script>
npm或其他方式下载
npm i tesseract
2、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script>
<body>
<img src="./en.png" alt="" />
<button onclick="orcBtn1()">识别英文</button>
<hr />
<img src="./zn.png" alt="" />
<button onclick="orcBtn2()">识别中文</button>
<hr />
<img src="./1.png" alt="" />
<button onclick="orcBtn3()">识别中英文</button>
<hr />
</body>
<script>
const btn = document.querySelector('button')
function orcBtn1() {
Tesseract.recognize('./en.png').then(res => {
console.log(res.data.text)
})
}
function orcBtn2() {
Tesseract.recognize('./zn.png', 'chi_sim').then(res => {
console.log(res.data.text)
})
}
function orcBtn3() {
Tesseract.recognize('./1.png', 'eng+chi_sim').then(res => {
console.log(res.data.text)
})
}
</script>
</html>