背景

是這樣的，我們公司有一個(gè)平臺，這個(gè)平臺上面有一個(gè)頁面，是一個(gè)我們公司內(nèi)部存放一些字幕圖片的，圖片很多，差不多每一頁有100張的樣子，類似于下面這樣的圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

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

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

思路

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

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

tesseract.js

于是我就去網(wǎng)上找找有哪些庫可以實(shí)現(xiàn)這個(gè)功能，你還真別說，還真有！！這個(gè)庫就是tesseract.js74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

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

首先需要安裝這個(gè)庫74Z28資訊網(wǎng)——每日最新資訊28at.com

npm i tesseract.js

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

74Z28資訊網(wǎng)——每日最新資訊28at.com

可以看出他直接能把圖片上的結(jié)果解析出來！！！真的牛逼！！！有了這個(gè)，那我輕輕松松就可以完成上面交代的任務(wù)了！！！74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn)功能

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

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

可以看到每一張圖片都解析得到keyword74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

那么搜索效果自然可以完成74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

搜索中文呢？

上面只能解析英文，可以看到有 eng 這個(gè)參數(shù)，那怎么才能解析中文呢？只需要改成chi_sim即可74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

圖片74Z28資訊網(wǎng)——每日最新資訊28at.com

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

圖片 74Z28資訊網(wǎng)——每日最新資訊28at.com

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

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

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