使用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玉兔迎春图高亮的资料请关注编程网其它相关文章！