效果:1：
效果图2：
一、安装tesseract.js
npm i tesseract.js二、静态页面实现
<template>
<div>
<div style="marginTop:100px">
<input @change="handleChage" type="file" id="image-input" accept="image/*">
<br />
<button @click="processImage">提取文字</button>
<div id="show-picture"></div>
</div>
<div>
<p style="color:red">提取到的内容：</p>
<span id="result"></span>
</div>
</div>
</template>
三、选择图片显示在页面上
<script setup>
import { createWorker } from 'tesseract.js';
//将选择的图片显示在页面上
const handleChage = () => {
document.getElementById("result").innerText = ""
let getUserPhoto = document.getElementById("image-input");
//创建一个FileReader对象，用于读取图像文件
let reader = new FileReader();
//读取第一个文件，并转为base64格式
reader.readAsDataURL(getUserPhoto.files[0]);
//只显示第一个图片
reader.onload = function () {
let image = document.createElement("img");
image.width = "400";
//设置图片
image.src = reader.result;
let showPicture = document.getElementById("show-picture");
while (showPicture.firstChild) {
showPicture.removeChild(showPicture.firstChild);
}
showPicture.appendChild(image)
};
}
<script>四、核心代码，功能实现
const processImage = () => {
let worker;
let input = document.getElementById('image-input');
if (input.files && input.files[0]) {
let reader = new FileReader();
reader.onload = async function (e) {
//创建一个Worker线程，参数为需要识别的语言， chi_sim代表简体中文
worker = await createWorker('chi_sim')
worker.recognize(e.target.result)
.then(result => {
// 提取出的文字，给元素赋值
let extractedText = result.data.text;
document.getElementById('result').innerText = extractedText;
})
.catch(error => {
console.error('Error:', error);
}).finally(() => {
if (worker)
// 清除当前Worker线程
worker.terminate();
})
};
reader.readAsDataURL(input.files[0]);
}
}五、注：只能识别标准文本图片，并且会有误差，识别别的的图片效果会差很多
