背景

是這樣的，我們公司有一個平臺，這個平臺上面有一個頁面，是一個我們公司內部存放一些字幕圖片的，圖片很多，差不多每一頁有100張的樣子，類似于下面這樣的圖片8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

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

圖片8g528資訊網——每日最新資訊28at.com

思路

其實思路很清晰，分析出每一張圖片上的文字，并存在對象的keyword中，搜搜的時候去過濾出keyword包含搜索文字的圖片即可。8g528資訊網——每日最新資訊28at.com

但是難就難在，我要怎么分析出圖片上的文字并存起來呢？8g528資訊網——每日最新資訊28at.com

tesseract.js

于是我就去網上找找有哪些庫可以實現這個功能，你還真別說，還真有！！這個庫就是tesseract.js8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

tesseract.js 是一個可以分析出圖片上文字的一個庫，我們通過一個小例子來看看他的使用方式8g528資訊網——每日最新資訊28at.com

首先需要安裝這個庫8g528資訊網——每日最新資訊28at.com

npm i tesseract.js

接著引入并使用它解析圖片文字，它識別后會返回一個 Promise，成功的話會走 then8g528資訊網——每日最新資訊28at.com

8g528資訊網——每日最新資訊28at.com

可以看出他直接能把圖片上的結果解析出來！！！真的牛逼！！！有了這個，那我輕輕松松就可以完成上面交代的任務了！！！8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

實現功能

我們需要解析每一張圖片的文字，并存入 keyword屬性中，以供過濾篩選8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

可以看到每一張圖片都解析得到keyword8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

那么搜索效果自然可以完成8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

搜索中文呢？

上面只能解析英文，可以看到有 eng 這個參數，那怎么才能解析中文呢？只需要改成chi_sim即可8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

圖片8g528資訊網——每日最新資訊28at.com

如果你想要中文和英文一起解析，可以這么寫eng+chi_sim8g528資訊網——每日最新資訊28at.com

圖片 8g528資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-82179-0.html超級離譜的前端需求：搜索圖片里的文字

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Python數據分析必備：Pandas中Rolling方法的完全指南

下一篇： JVM類加載：如何手寫自定義類加載器，命名空間詳解