嗨，大家好，我是徐小夕。之前和大家分享了很多可視化，零代碼和前端工程化的最佳實踐，最近也在迭代可視化文檔知識引擎Nocode/WEP， 剛好在設計一個圖像識別的功能，涉及到了圖像OCR技術, 接下來就和大家分享一下前端如何低成本上手圖像識別。

案例演示

首先和大家演示一下實現(xiàn)的效果，我們的最終目標是基于一張圖片，通過技術的手段自動提取圖片的信息，并展示到文檔中，提高文檔編寫的效率。

圖片

由上圖可以看到我們成功提取了圖片中的文本信息，通過這種方式我們可以更高效地對文檔進行創(chuàng)作。

圖片

什么是圖像OCR技術

圖片

OCR（Optical Character Recognition，光學字符識別）是指提取圖像中的文字信息，下面介紹一些常見的圖片 OCR 技術方案：

• 基于規(guī)則的 OCR：使用預定義的規(guī)則和模板來識別特定類型的文本，適用于結構化的文檔，如表格、票據(jù)等；
• 基于機器學習的 OCR：通過訓練模型來識別不同字體、大小、顏色等特征的文字，適用于非結構化的文本，如照片、手寫字等；
• two-stage 方法：文字檢測+文字識別，分別由檢測網(wǎng)絡和識別網(wǎng)絡來完成，是目前主流的 OCR 方法，效果較好；
• 端到端方法：直接輸出識別后的文本，由一個大網(wǎng)絡來完成，但該方法仍存在特征共享、模型訓練等問題。

上面這些技術方案的優(yōu)缺點和應用場景我簡單和大家介紹如下：

• 基于規(guī)則的 OCR：

優(yōu)點：對于特定類型的文本，如表格、票據(jù)等，識別準確率較高。

缺點：規(guī)則和模板的定義需要大量的人工工作，對于復雜的文檔結構和字體變化的適應性較差。

應用場景：適用于結構化文檔的識別，如表格、票據(jù)、身份證等。

• 基于機器學習的 OCR：
• 優(yōu)點：可以自動學習文字的特征，對于不同字體、大小、顏色等的適應性較好。
• 缺點：需要大量的訓練數(shù)據(jù)，對于生僻字和特殊字體的識別準確率可能較低。
• 應用場景：適用于非結構化文本的識別，如圖像、照片、手寫字等。
• two-stage 方法：
• 優(yōu)點：將文字檢測和識別分開處理，提高了識別準確率和靈活性。
• 缺點：需要兩個網(wǎng)絡進行處理，計算量較大，速度較慢。
• 應用場景：適用于對識別準確率要求較高的場景，如文檔數(shù)字化、自動化表單填寫等。
• 端到端方法：
• 優(yōu)點：將文字檢測和識別統(tǒng)一在一個網(wǎng)絡中進行處理，減少了計算量和處理時間。
• 缺點：特征共享和模型訓練等問題仍需要進一步解決，對于復雜場景的適應性較差。
• 應用場景：適用于對速度要求較高的場景，如實時翻譯、圖片搜索等。

在實際應用中，我們需要根據(jù)具體需求和場景選擇合適的 OCR 技術方案。

基于圖像OCR的開源方案分享

圖片

那對于前端而言，我們怎么能使用這些 OCR 技術呢？我在做了大量研究和查找之后，發(fā)現(xiàn)了幾款不錯的OCR開源項目，可以幫助我們輕松在自己的應用中實現(xiàn)OCR能力：

• Tesseract：一款由 HP 實驗室開發(fā)、由 Google 維護的開源 OCR 引擎，支持多語言和多平臺。
• Tesseract.js：Tesseract 的 JavaScript 版本，支持一百多種語言，可使用 npm 安裝或在頁面中直接引用 js。
• PaddleOCR：飛槳首次開源的文字識別模型套件，支持中英文識別，支持傾斜、豎排等多種方向文字識別，支持 GPU、CPU 預測。
• CnOCR：Python 3 下的文字識別工具包，支持簡體中文、繁體中文（部分模型）、英文和數(shù)字的常見字符識別，自帶 20 多個訓練好的識別模型，適用于不同應用場景。
• chineseocr_lite：超輕量級中文 OCR，支持豎排文字識別，支持 ncnn、mnn、tnn 推理，模型大小僅 4.7M。

這些開源方案都有各自的特點和優(yōu)勢，可以根據(jù)具體需求和應用場景選擇適合的方案。在使用這些開源方案時，我們仍然需要考慮以下因素：

• 識別精度：不同的開源方案在識別精度上可能存在差異，可以根據(jù)對識別結果準確性的要求進行選擇。
• 語言支持：如果需要識別特定語言的文字，需要確保所選方案支持該語言。
• 性能和效率：考慮方案的執(zhí)行速度和資源消耗，特別是在處理大量圖片或對實時性要求較高的情況下。
• 可擴展性：如果有進一步開發(fā)和定制的需求，選擇具有良好可擴展性的方案。
• 社區(qū)和文檔：活躍的社區(qū)和完善的文檔可以提供更好的支持和幫助。

這里我寫一個前端實現(xiàn)的案例，和大家分享一下具體用法。

圖片

首先我們需要安裝tesseract.js:

yarn add tesseract.js

其次來看看我寫的一個業(yè)務代碼：

const fileData = await req.formData();
const searchParams = req.nextUrl.searchParams;
const lang = searchParams.get('lang') || 'eng';
const file: File | null = fileData.get('file') as unknown as File

if (!file) {
    return Response.json({ success: 0 })
}

const bytes = await file.arrayBuffer()
const buffer = Buffer.from(bytes)
const worker = await createWorker(lang, 1, {
    // corePath: '',
    workerPath: "",  // 定義work路徑
    langPath: "",  // 定義語言包路徑
    gzip: false
});
const ret = await worker.recognize(buffer);
// console.log(ret.data.text);
await worker.terminate();
return Response.json({ data: { output: ret.data.text } })

我們在上面代碼里可以看到我們需要先把文件轉化為buffer，再利用worker ，來提取圖像信息。代碼由于我使用的是nextjs，對nodejs開發(fā)比較友好，當然大家也可以用其他框架來實現(xiàn)。

目前這個功能我已經(jīng)實現(xiàn)到了 Nocode/WEP 文檔知識庫中，大家可以體驗參考一下:

圖片

同時為了提高識別度，我也看到一些可行的方案，這里和大家分享一下：

1. 數(shù)據(jù)增強：通過對圖像進行旋轉、縮放、翻轉等操作，增加數(shù)據(jù)的多樣性。
2. 優(yōu)化訓練：調整訓練參數(shù)，如學習率、迭代次數(shù)等，以獲得更好的模型性能。
3. 使用高質量圖像：確保輸入的圖像清晰、分辨率高，減少噪聲和干擾。
4. 字符分割：將圖像中的字符準確分割，有助于提高識別精度。
5. 語言模型融合：結合語言模型來提高對文本的理解和糾正錯誤。
6. 模型融合：嘗試融合多個不同的 OCR 模型，以綜合它們的優(yōu)勢。
7. 人工標注：對一些困難樣本進行人工標注，以改進模型學習。
8. 超參數(shù)調優(yōu)：對模型的超參數(shù)進行細致的調整和優(yōu)化。