使用vue實現玉兔迎春圖高亮示例詳解
正文
兔年來臨，老板意氣風發的說：我們的系統登錄頁要換做玉兔迎春的背景頁，而且用戶ctrl+f搜索【玉兔迎春】關鍵字時，圖片要高亮。
新的一年，祝大傢身體健康、Bug–
一、明確需求
將系統的登錄頁面背景換做如上圖【玉兔迎春】。
而且，用戶可以通過搜索關鍵字【玉兔迎春】讓背景圖的文字進行高亮。
下面我們進行分析一下。
二、進行分析
接到該需求的時候，心裡感覺‘’你在逗我‘’這樣子的。
於是，老板像是看穿我的疑惑時，語重心長的對我們說：我們要給用戶一個煥然一新的感覺。
瘋狂點點頭，並想好如何讓圖片裡面的文字進行高亮的對策。
靜下來思考片刻，其實不是很難。
2.1 思路
我們隻需要蓋一層div在圖片上，然後設置文字透明，瀏覽器ctrl+f搜索的時候，會給文字他高亮黃的顏色，我們就可以看到文字瞭。
蓋的這層div，裡面包含著我們的文字。
那麼，難點就是怎麼從圖片獲取文字出來。
其實這個技術，有個專業詞語來描述，叫ocr識別技術。
2.2 ocr
ocr，其實也叫“光學字符識別技術”，是最為常見的、也是目前最高效的文字掃描技術，它可以從圖片或者PDF中識別和提取其中的文字內容，輸出文本文檔，方便驗證用戶信息，或者直接進行內容編輯。
揭秘該技術：實現文字識別？從圖片到文字的過程發生瞭什麼？
分別是輸入、圖像與處理、文字檢測、文本識別，及輸出。每個過程都需要算法的深度配合，因此從技術底層來講，從圖片到文字輸出，要經歷以下的過程：
1、圖像輸入：讀取不同圖像格式文件；
2、圖像預處理：主要包括圖像二值化，噪聲去除，傾斜校正等；
3、版面分析：將文檔圖片分段落，分行；
4、字符切割：處理因字符粘連、斷筆造成字符難以簡單切割的問題；
5、字符特征提取：對字符圖像提取多維特征；
6、字符識別：將當前字符提取的特征向量與特征模板庫進行模板粗分類和模板細匹配，識別出字符；
7、版面恢復：識別原文檔的排版，按原排版格式將識別結果輸出到文本文檔；
8、後處理校正: 根據特定的語言上下文的關系，對識別結果進行校正。
2.3 應用
隨著ocr技術的成熟，不少軟件已經出瞭該功能。
比如：微信、qq、語雀等等。
還有一些試卷試題，都會用到ocr識別技術。
還有一些技術文檔，實現自定義搜索功能，表格關鍵字高亮。
老板這次需求：把玉兔迎春圖實現高亮。
和如上實現的技術思路類似。
我們也可以自定義顏色，加個span標簽給其想要的樣式。
三、使用
當然，我們可能並不關心底層的實現，隻關心怎麼怎麼去使用。
我們可以調用百度API：文字提取技術
還可以使用java的tesseract-ocr庫，其實就是文字的訓練。
所以會有個弊端，就是文件可能會有點大，存放著大量文字。
後記
在一個需求的產生之後，我們如果沒什麼思路，可以借鑒一下，目前市場上有沒有類似的技術的沉淀，從而實現需求。
最後，望大傢的新的一年，工作順利，身體健康。
玉兔迎春啦🐇🏮🐇🏮🐇~
以上就是使用vue實現玉兔迎春圖高亮示例詳解的詳細內容，更多關於vue玉兔迎春圖高亮的資料請關註WalkonNet其它相關文章！