需求背景

在開發過程中可能會存在用戶上傳一張圖片后下方需要自己識別出來文字數字等信息，有的時候會通過后端來識別后返回，但是也會存在純前端去識別的情況，這個時候就需要使用到Tesseract.js這個庫了? ?附Tesseract.js官方（https://github.com/naptha/tesseract.js）

實現過程

?主要的實現代碼部分和這部分的簡易效果圖

import {createWorker} from 'tesseract.js';const worker = await createWorker();
await worker.loadLanguage('chi_sim');
await worker.initialize('chi_sim');
const { data: { text } } = await worker.recognize(myImage);
console.log(text);
await worker.terminate();

下方是一個簡單的完整實現案例 ??

npm install tesseract.js

1. createWorker創建worker實例。

2. 調用worker.loadLanguage('chi_sim')。

3. 調用worker.initialize('chi_sim')。

4. 然后調用recognize方法進行識別。

import React, { useState, useEffect } from 'react';
import { createWorker } from 'tesseract.js';const OCRComponent = () => {const [image, setImage] = useState(null);const [text, setText] = useState('');const [progress, setProgress] = useState(0);const [error, setError] = useState('');const [worker, setWorker] = useState(null);// 初始化 WorkeruseEffect(() => {const initializeWorker = async () => {const newWorker = await createWorker();setWorker(newWorker);};initializeWorker();return () => {if (worker) {worker.terminate();}};}, []);// 處理圖片上傳const handleImageUpload = (e) => {const file = e.target.files[0];if (file) {const reader = new FileReader();reader.onloadend = () => {setImage(reader.result);};reader.readAsDataURL(file);setText('');setError('');}};// 執行 OCR 識別const recognizeText = async () => {if (!worker || !image) return;try {//chi_sim代表的是簡體中文包  eng是英文  需要識別其他語言的話可以官網去看下對應的名稱await worker.loadLanguage('chi_sim');await worker.initialize('chi_sim');const { data: { text } } = await worker.recognize(image, {logger: (m) => {if (m.status === 'recognizing text') {setProgress(Math.round(m.progress * 100));}}});setText(text);} catch (err) {setError('識別失敗，請重試或更換圖片。');console.error(err);} finally {await worker.terminate();}};return (<div><h1>中文 OCR 文字識別</h1>{/* 文件上傳 */}<input type="file" accept="image/*" onChange={handleImageUpload} />{/* 圖片預覽 */}{image && (<div><h3>圖片預覽</h3><img src={image} alt="預覽" style={{ maxWidth: '100%', height: 'auto' }} /></div>)}{/* 識別按鈕及進度 */}{image && (<div><button onClick={recognizeText} disabled={progress > 0}>{progress > 0 ? `識別中... ${progress}%` : '開始識別'}</button></div>)}{/* 顯示結果 */}{text && (<div><h3>識別結果</h3><pre style={{ whiteSpace: 'pre-wrap' }}>{text}</pre></div>)}{/* 錯誤提示 */}{error && <p style={{ color: 'red' }}>{error}</p>}</div>);
};export default OCRComponent;