正文

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

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

一、明確需求

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

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

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

二、進(jìn)行分析

接到該需求的時候，心里感覺‘’你在逗我‘’這樣子的。

于是，老板像是看穿我的疑惑時，語重心長的對我們說：我們要給用戶一個煥然一新的感覺。

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

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

2.1 思路

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

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

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

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

2.2 ocr

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

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

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

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

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

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

4、字符切割：處理因字符粘連、斷筆造成字符難以簡單切割的問題；

5、字符特征提?。簩ψ址麍D像提取多維特征；

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

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

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

2.3 應(yīng)用

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

比如：微信、qq、語雀等等。

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

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

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

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

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

三、使用

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

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

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

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

后記

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

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

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

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

最新評論