圖像OCR技術實踐，讓前端也能輕松上手圖像識別

作者：徐小夕 2024-06-07 11:24:20

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

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

案例演示

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

圖片

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

圖片

什么是圖像OCR技術

圖片

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

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

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

基于規則的 OCR：

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

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

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

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

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

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

圖片

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

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

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

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

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

圖片

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

yarn add tesseract.js

其次來看看我寫的一個業務代碼：

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開發比較友好，當然大家也可以用其他框架來實現。

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

圖片

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

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

責任編輯：武曉燕來源：趣談前端