正文

兔年來(lái)臨，老板意氣風(fēng)發(fā)的說(shuō)：我們的系統(tǒng)登錄頁(yè)要換做玉兔迎春的背景頁(yè)，而且用戶ctrl+f搜索【玉兔迎春】關(guān)鍵字時(shí)，圖片要高亮。

新的一年，祝大家身體健康、Bug--

一、明確需求

將系統(tǒng)的登錄頁(yè)面背景換做如上圖【玉兔迎春】。

而且，用戶可以通過(guò)搜索關(guān)鍵字【玉兔迎春】讓背景圖的文字進(jìn)行高亮。

下面我們進(jìn)行分析一下。

二、進(jìn)行分析

接到該需求的時(shí)候，心里感覺(jué)‘’你在逗我‘’這樣子的。

于是，老板像是看穿我的疑惑時(shí)，語(yǔ)重心長(zhǎng)的對(duì)我們說(shuō)：我們要給用戶一個(gè)煥然一新的感覺(jué)。

瘋狂點(diǎn)點(diǎn)頭，并想好如何讓圖片里面的文字進(jìn)行高亮的對(duì)策。

靜下來(lái)思考片刻，其實(shí)不是很難。

2.1 思路

我們只需要蓋一層div在圖片上，然后設(shè)置文字透明，瀏覽器ctrl+f搜索的時(shí)候，會(huì)給文字他高亮黃的顏色，我們就可以看到文字了。

蓋的這層div，里面包含著我們的文字。

那么，難點(diǎn)就是怎么從圖片獲取文字出來(lái)。

其實(shí)這個(gè)技術(shù)，有個(gè)專業(yè)詞語(yǔ)來(lái)描述，叫ocr識(shí)別技術(shù)。

2.2 ocr

ocr，其實(shí)也叫“光學(xué)字符識(shí)別技術(shù)”，是最為常見(jiàn)的、也是目前最高效的文字掃描技術(shù)，它可以從圖片或者PDF中識(shí)別和提取其中的文字內(nèi)容，輸出文本文檔，方便驗(yàn)證用戶信息，或者直接進(jìn)行內(nèi)容編輯。

揭秘該技術(shù)：實(shí)現(xiàn)文字識(shí)別？從圖片到文字的過(guò)程發(fā)生了什么？

分別是輸入、圖像與處理、文字檢測(cè)、文本識(shí)別，及輸出。每個(gè)過(guò)程都需要算法的深度配合，因此從技術(shù)底層來(lái)講，從圖片到文字輸出，要經(jīng)歷以下的過(guò)程：

1、圖像輸入：讀取不同圖像格式文件；

2、圖像預(yù)處理：主要包括圖像二值化，噪聲去除，傾斜校正等；

3、版面分析：將文檔圖片分段落，分行；

4、字符切割：處理因字符粘連、斷筆造成字符難以簡(jiǎn)單切割的問(wèn)題；

5、字符特征提?。簩?duì)字符圖像提取多維特征；

6、字符識(shí)別：將當(dāng)前字符提取的特征向量與特征模板庫(kù)進(jìn)行模板粗分類和模板細(xì)匹配，識(shí)別出字符；

7、版面恢復(fù)：識(shí)別原文檔的排版，按原排版格式將識(shí)別結(jié)果輸出到文本文檔；

8、后處理校正: 根據(jù)特定的語(yǔ)言上下文的關(guān)系，對(duì)識(shí)別結(jié)果進(jìn)行校正。

2.3 應(yīng)用

隨著ocr技術(shù)的成熟，不少軟件已經(jīng)出了該功能。

比如：微信、qq、語(yǔ)雀等等。

還有一些試卷試題，都會(huì)用到ocr識(shí)別技術(shù)。

還有一些技術(shù)文檔，實(shí)現(xiàn)自定義搜索功能，表格關(guān)鍵字高亮。

老板這次需求：把玉兔迎春圖實(shí)現(xiàn)高亮。

和如上實(shí)現(xiàn)的技術(shù)思路類似。

我們也可以自定義顏色，加個(gè)span標(biāo)簽給其想要的樣式。

三、使用

當(dāng)然，我們可能并不關(guān)心底層的實(shí)現(xiàn)，只關(guān)心怎么怎么去使用。

我們可以調(diào)用百度API：文字提取技術(shù)

還可以使用java的tesseract-ocr庫(kù)，其實(shí)就是文字的訓(xùn)練。

所以會(huì)有個(gè)弊端，就是文件可能會(huì)有點(diǎn)大，存放著大量文字。

后記

在一個(gè)需求的產(chǎn)生之后，我們?nèi)绻麤](méi)什么思路，可以借鑒一下，目前市場(chǎng)上有沒(méi)有類似的技術(shù)的沉淀，從而實(shí)現(xiàn)需求。

最后，望大家的新的一年，工作順利，身體健康。

玉兔迎春啦??????????~

以上就是使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue玉兔迎春圖高亮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！