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

案例演示

首先和大家演示一下實現的效果，我們的最終目標是基于一張圖片，通過技術的手段自動提取圖片的信息，并展示到文檔中，提高文檔編寫的效率。1BO28資訊網——每日最新資訊28at.com

圖片1BO28資訊網——每日最新資訊28at.com

由上圖可以看到我們成功提取了圖片中的文本信息，通過這種方式我們可以更高效地對文檔進行創作。1BO28資訊網——每日最新資訊28at.com

圖片1BO28資訊網——每日最新資訊28at.com

1BO28資訊網——每日最新資訊28at.com

什么是圖像OCR技術

圖片1BO28資訊網——每日最新資訊28at.com

OCR（Optical Character Recognition，光學字符識別）是指提取圖像中的文字信息，下面介紹一些常見的圖片 OCR 技術方案：1BO28資訊網——每日最新資訊28at.com

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

上面這些技術方案的優缺點和應用場景我簡單和大家介紹如下：1BO28資訊網——每日最新資訊28at.com

• 基于規則的 OCR：

優點：對于特定類型的文本，如表格、票據等，識別準確率較高。1BO28資訊網——每日最新資訊28at.com

缺點：規則和模板的定義需要大量的人工工作，對于復雜的文檔結構和字體變化的適應性較差。1BO28資訊網——每日最新資訊28at.com

應用場景：適用于結構化文檔的識別，如表格、票據、身份證等。1BO28資訊網——每日最新資訊28at.com

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

在實際應用中，我們需要根據具體需求和場景選擇合適的 OCR 技術方案。1BO28資訊網——每日最新資訊28at.com

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

圖片1BO28資訊網——每日最新資訊28at.com

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

• 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。

這些開源方案都有各自的特點和優勢，可以根據具體需求和應用場景選擇適合的方案。在使用這些開源方案時，我們仍然需要考慮以下因素：1BO28資訊網——每日最新資訊28at.com

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

這里我寫一個前端實現的案例，和大家分享一下具體用法。1BO28資訊網——每日最新資訊28at.com

圖片1BO28資訊網——每日最新資訊28at.com

首先我們需要安裝tesseract.js:1BO28資訊網——每日最新資訊28at.com

yarn add tesseract.js

其次來看看我寫的一個業務代碼：1BO28資訊網——每日最新資訊28at.com

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 Fileif (!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開發比較友好，當然大家也可以用其他框架來實現。1BO28資訊網——每日最新資訊28at.com

目前這個功能我已經實現到了 Nocode/WEP 文檔知識庫中，大家可以體驗參考一下:1BO28資訊網——每日最新資訊28at.com

圖片1BO28資訊網——每日最新資訊28at.com

同時為了提高識別度，我也看到一些可行的方案，這里和大家分享一下：1BO28資訊網——每日最新資訊28at.com

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

本文鏈接：http://www.tebozhan.com/showinfo-26-92734-0.html圖像OCR技術實踐，讓前端也能輕松上手圖像識別

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 我們一起探索微服務治理

下一篇： Rathole：基于Rust開發的輕量級高性能反向代理，替代Frp和Ngrok！