28k 的開源 OCR 工具
要從圖像、照片中提取文本嗎？是否剛剛拍了講義的照片并想將其轉(zhuǎn)換為文本？那么您將需要一個可以通過 OCR（光學(xué)字符識別）識別文本的應(yīng)用程序。今天，我們介紹一款用強(qiáng)大的開源 OCR 庫：Tesseract.js。
Tesseract.js 是一個 javascript 庫，可以從圖像中獲取幾乎任何語言的文字。它將原始的 Tesseract 從 C 編譯為 JavaScript WebAssembly，從而使 OCR 可以在瀏覽器中訪問。Tesseract.js 引擎最初是用 ASM.js 編寫的，后來移植到 WebAssembly，但在某些不支持 WebAssembly 的情況下，ASM.js 仍然可以作為備份。
正如 Tesseract.js 網(wǎng)站上所述，它支持 100 多種語言、自動文本定位和腳本檢測，以及用于閱讀段落、單詞和字符邊界框的簡單界面。
使用
這里我們將展示如何使用 Tesseract.js 構(gòu)建 OCR Web 應(yīng)用程序，通過代碼一步步實(shí)現(xiàn)。
第 1 步：引入 tesseract.js
首先，我們需要包含 JavaScript 庫 tesseract.js。在 HTML5 頁面中包含 Tesseract.js 的最簡單方法是使用 CDN。因此，將以下內(nèi)容添加到網(wǎng)頁的 中。
<html>
<head>
<script src='https://unpkg.com/[email protected]/dist/tesseract.min.js'></script>
</head>
<body>
......
<script src="js/tesseract-ocr.js"></script>
</body>
</html>
如果使用的是 npm，也可以通過運(yùn)行下面的命令來安裝它
npm install tesseract.js@next
第 2 步：設(shè)置html元素
接下來我們需要做的是在下面添加 html 元素
-
語言選擇器 -
圖像文件選擇器 -
所選圖像的縮略圖預(yù)覽 -
處理后結(jié)果的占位符
<select id="langsel">
<option value='eng' selected> English </option>
</select>
<input type="file" id="file-1" class="inputfile" />
<img id="selected-image" src="" />
<div id="log">
<span id="startPre">
<a id="startLink" href="#">Click here to recognize text</a> or choose your own image
</span>
</div>
第 3 步：初始化并運(yùn)行 Tesseract
此外，我們將初始化一個 TesseractWorker，然后使用識別功能。這個函數(shù)異步運(yùn)行并返回一個 TesseractJob 對象。
我們可以在回調(diào)函數(shù)中獲取文本結(jié)果，可以使用 then() 方法添加回調(diào)函數(shù)。此外，使用 progress() 方法添加回調(diào)以監(jiān)視 OCR 操作的狀態(tài)和進(jìn)度。
const worker = new Tesseract.TesseractWorker();
worker.recognize(file, $("#langsel").val())
.progress(function(packet){
console.info(packet)
progressUpdate(packet)
})
.then(function(data){
console.log(data)
progressUpdate({ status: 'done', data: data })
})
第 4 步：顯示進(jìn)度和結(jié)果
最后，讓我們看看返回的 TesseractJob 對象，并使用它來顯示結(jié)果。
返回結(jié)果后，它包含置信度，即從圖像中提取的文本。在單詞數(shù)組中，它還包括單詞在圖像中的位置?，F(xiàn)在我們使用下面的函數(shù) progressUpdate 將其顯示給用戶。
function progressUpdate(packet){
var log = document.getElementById('log');
if(log.firstChild && log.firstChild.status === packet.status){
if('progress' in packet){
var progress = log.firstChild.querySelector('progress')
progress.value = packet.progress
}
}else{
var line = document.createElement('div');
line.status = packet.status;
var status = document.createElement('div')
status.className = 'status'
status.appendChild(document.createTextNode(packet.status))
line.appendChild(status)
if('progress' in packet){
var progress = document.createElement('progress')
progress.value = packet.progress
progress.max = 1
line.appendChild(progress)
}
if(packet.status == 'done'){
log.innerHTML = ''
var pre = document.createElement('pre')
pre.appendChild(document.createTextNode(packet.data.text.replace(/\n\s*\n/g, '\n')))
line.innerHTML = ''
line.appendChild(pre)
$(".fas").removeClass('fa-spinner fa-spin')
$(".fas").addClass('fa-check')
}
log.insertBefore(line, log.firstChild)
}
}
這就是全部代碼。我們可以選擇自己的帶有一些文字的圖像，然后觀看結(jié)果。
小結(jié)
Tesseract.js 有一些優(yōu)點(diǎn)，如它支持多種語言，正常字體和清晰背景的準(zhǔn)確性非常高。當(dāng)然有也有些缺點(diǎn)，如背景復(fù)雜時效果不佳，會被一些自定義字體弄糊涂了。
但是，它仍是一個很棒的 JavaScript 庫。它為瀏覽器帶來了 OCR 的強(qiáng)大功能，并為開發(fā)人員打開了一扇機(jī)會之門。
?「Tesseract.js」
地址：https://github.com/naptha/tesseract.js
??：28.6k
語言：Javascript
?
-End-
最近有一些小伙伴，讓我?guī)兔φ乙恍?nbsp;面試題 資料，于是我翻遍了收藏的 5T 資料后，匯總整理出來，可以說是程序員面試必備！所有資料都整理到網(wǎng)盤了，歡迎下載！
面試題】即可獲取
好文分享給更多人↓↓