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

案例演示

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

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

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

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

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

什么是圖像OCR技術

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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ù)具體需求和應用場景選擇適合的方案。在使用這些開源方案時，我們仍然需要考慮以下因素：zfu28資訊網——每日最新資訊28at.com

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

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

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

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

yarn add tesseract.js

其次來看看我寫的一個業(yè)務代碼：zfu28資訊網——每日最新資訊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開發(fā)比較友好，當然大家也可以用其他框架來實現(xiàn)。zfu28資訊網——每日最新資訊28at.com

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

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

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

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)化。

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

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

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

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