超级离谱的前端需求:搜索图片里的文字

开发 前端
其实思路很清晰,分析出每一张图片上的文字,并存在对象的keyword​中,搜搜的时候去过滤出keyword包含搜索文字的图片即可。但是难就难在,我要怎么分析出图片上的文字并存起来呢?

背景

是这样的,我们公司有一个平台,这个平台上面有一个页面,是一个我们公司内部存放一些字幕图片的,图片很多,差不多每一页有100张的样子,类似于下面这样的图片

图片图片

前几天上面大佬们说想要更加方便快捷地找到某一张图片,怎么个快捷法呢?就是通过搜索文字,能搜索到包含这些文字的图片。。。我一想,这需求简直逆天啊!!!!平时只做过搜索文字的,没做过根据文字搜索出图片的。。。。

图片图片

思路

其实思路很清晰,分析出每一张图片上的文字,并存在对象的keyword中,搜搜的时候去过滤出keyword包含搜索文字的图片即可。

但是难就难在,我要怎么分析出图片上的文字并存起来呢?

tesseract.js

于是我就去网上找找有哪些库可以实现这个功能,你还真别说,还真有!!这个库就是tesseract.js

图片图片

tesseract.js 是一个可以分析出图片上文字的一个库,我们通过一个小例子来看看他的使用方式

首先需要安装这个库

npm i tesseract.js

接着引入并使用它解析图片文字,它识别后会返回一个 Promise,成功的话会走 then

图片

可以看出他直接能把图片上的结果解析出来!!!真的牛逼!!!有了这个,那我轻轻松松就可以完成上面交代的任务了!!!

图片图片

实现功能

我们需要解析每一张图片的文字,并存入 keyword属性中,以供过滤筛选

图片图片

可以看到每一张图片都解析得到keyword

图片图片

那么搜索效果自然可以完成

图片图片

搜索中文呢?

上面只能解析英文,可以看到有 eng 这个参数,那怎么才能解析中文呢?只需要改成chi_sim即可

图片图片

图片图片

如果你想要中文和英文一起解析,可以这么写eng+chi_sim

图片 图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2021-10-22 08:21:27

CSS 技巧文字二次加粗

2022-06-30 07:45:29

搜索联合搜索索引

2017-02-24 13:20:13

搜索引擎数据结构架构

2021-08-27 13:20:06

PythonAddict模块

2021-12-30 09:40:08

运行 Linux虚拟机

2013-04-01 10:51:02

2015-01-20 17:15:55

iOS源码滚动视图

2012-07-18 02:13:30

文字图片应用小应用

2016-09-06 21:09:35

Phpgd库图片水印

2009-12-11 09:52:39

Chrome图片搜索

2023-01-15 20:28:32

前端图片压缩

2023-11-04 12:43:44

前端图片参数

2022-08-08 08:29:55

图片压缩前端互联网

2022-04-27 07:49:32

CSS前端

2015-08-04 10:50:03

大数据时代搜索引擎

2014-07-10 10:56:21

jQuery

2022-03-23 09:36:51

AI训练模型

2023-12-01 15:34:03

Python图片

2020-06-02 10:43:54

Kubernetes容器服务

2022-02-24 17:37:47

低代码拖拽前端
点赞
收藏

51CTO技术栈公众号