正文

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

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

一、明確需求

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

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

下面我們進行分析一下。

二、進行分析

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

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

瘋狂點點頭，并想好如何讓圖片里面的文字進行高亮的對策。

靜下來思考片刻，其實不是很難。

2.1 思路

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

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

那么，難點就是怎么從圖片獲取文字出來。

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

2.2 ocr

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

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

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

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

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

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

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

5、字符特征提取：對字符圖像提取多維特征；

6、字符識別：將當前字符提取的特征向量與特征模板庫進行模板粗分類和模板細匹配，識別出字符；

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

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

2.3 應(yīng)用

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

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

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

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

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

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

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

三、使用

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

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

還可以使用java的tesseract-ocr庫，其實就是文字的訓練。

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

后記

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

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

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

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

最新評論