石頭自清潔掃拖機器人G10S評測：多年黑科技集大成之作 懶人終極福音
科技圈經(jīng)常能看到一個詞叫“縫合怪”，用來形容那些把好多功能或者外觀結合在一起的產(chǎn)品，通常這樣的詞是貶義詞，但如果真的是產(chǎn)品縫合的好、縫合的實用的話，那它就成了中性詞，今
嗨，大家好，我是徐小夕。之前和大家分享了很多可視化，零代碼和前端工程化的最佳實踐，最近也在迭代可視化文檔知識引擎Nocode/WEP， 剛好在設計一個圖像識別的功能，涉及到了圖像OCR技術, 接下來就和大家分享一下前端如何低成本上手圖像識別。
首先和大家演示一下實現(xiàn)的效果，我們的最終目標是基于一張圖片，通過技術的手段自動提取圖片的信息，并展示到文檔中，提高文檔編寫的效率。
圖片
由上圖可以看到我們成功提取了圖片中的文本信息，通過這種方式我們可以更高效地對文檔進行創(chuàng)作。
圖片
圖片
OCR（Optical Character Recognition，光學字符識別）是指提取圖像中的文字信息，下面介紹一些常見的圖片 OCR 技術方案：
上面這些技術方案的優(yōu)缺點和應用場景我簡單和大家介紹如下：
優(yōu)點：對于特定類型的文本，如表格、票據(jù)等，識別準確率較高。
缺點：規(guī)則和模板的定義需要大量的人工工作，對于復雜的文檔結構和字體變化的適應性較差。
應用場景：適用于結構化文檔的識別，如表格、票據(jù)、身份證等。
在實際應用中，我們需要根據(jù)具體需求和場景選擇合適的 OCR 技術方案。
圖片
那對于前端而言，我們怎么能使用這些 OCR 技術呢？我在做了大量研究和查找之后，發(fā)現(xiàn)了幾款不錯的OCR開源項目，可以幫助我們輕松在自己的應用中實現(xiàn)OCR能力：
這些開源方案都有各自的特點和優(yōu)勢，可以根據(jù)具體需求和應用場景選擇適合的方案。在使用這些開源方案時，我們?nèi)匀恍枰紤]以下因素：
這里我寫一個前端實現(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 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)。
目前這個功能我已經(jīng)實現(xiàn)到了 Nocode/WEP 文檔知識庫中，大家可以體驗參考一下:
圖片
同時為了提高識別度，我也看到一些可行的方案，這里和大家分享一下：
本文鏈接：http://www.www897cc.com/showinfo-26-92734-0.html圖像OCR技術實踐，讓前端也能輕松上手圖像識別
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 我們一起探索微服務治理
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號