背景

是這樣的，我們公司有一個平臺，這個平臺上面有一個頁面，是一個我們公司內部存放一些字幕圖片的，圖片很多，差不多每一頁有100張的樣子，類似于下面這樣的圖片

圖片

前幾天上面大佬們說想要更加方便快捷地找到某一張圖片，怎么個快捷法呢？就是通過搜索文字，能搜索到包含這些文字的圖片。。。我一想，這需求簡直逆天啊！！！！平時只做過搜索文字的，沒做過根據文字搜索出圖片的。。。。

圖片

思路

其實思路很清晰，分析出每一張圖片上的文字，并存在對象的keyword中，搜搜的時候去過濾出keyword包含搜索文字的圖片即可。

但是難就難在，我要怎么分析出圖片上的文字并存起來呢？

tesseract.js

于是我就去網上找找有哪些庫可以實現這個功能，你還真別說，還真有！！這個庫就是tesseract.js

圖片

tesseract.js 是一個可以分析出圖片上文字的一個庫，我們通過一個小例子來看看他的使用方式

首先需要安裝這個庫

npm i tesseract.js

接著引入并使用它解析圖片文字，它識別后會返回一個 Promise，成功的話會走 then

可以看出他直接能把圖片上的結果解析出來！！！真的牛逼！！！有了這個，那我輕輕松松就可以完成上面交代的任務了！！！

圖片

實現功能

我們需要解析每一張圖片的文字，并存入 keyword屬性中，以供過濾篩選

圖片

可以看到每一張圖片都解析得到keyword

圖片

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

圖片

搜索中文呢？

上面只能解析英文，可以看到有 eng 這個參數，那怎么才能解析中文呢？只需要改成chi_sim即可

圖片

圖片

如果你想要中文和英文一起解析，可以這么寫eng+chi_sim

圖片