Tesseract.js初使用

由于最近迷上了哔哩哔哩的直播,人穷没钱买瓜子,据说这个js能识别语音,和图片,刚好领取瓜子需要做一道数学题,又于是激动准备着手自己搞个插件自动领瓜子,哇咔咔咔~~~废话不说,表示尊重,
上git:https://github.com/naptha/tesseract.js
还有:http://tesseract.projectnaptha.com/

一、安装:

1.标签式:

用下面这个cdn地址或者在git中下载下来找到tesseract.js引入就行了
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

2.其他的就不说了,其实是我不会

二、使用:

/* recognize()启动识别的方法
 * "getCaptcha.jpg" 可以传入文件路径,文件对象,2d图像,二进制对象等
 * lang  识别的语言种类,下面再详细说
 * classify_bln_numeric_mode  识别过程中需要用到一些参数,类似一些常量的东东,也可以不填
 * progress() 执行识别过程中要进行的操作,简单的识别可以省略这个
 * packet 这个对象包含状态等内容,详细请console.info()
 * then()  相当于识别成功后的回调吧
 * data 自己console.info()
 */
Tesseract.recognize("getCaptcha.jpg", {
	lang: "eng",
	classify_bln_numeric_mode: 1
})
.progress(function(packet){
	//progressUpdate(packet)
	})
.then(function(data){
	alert(data.text);
	//progressUpdate({ status: 'done', data: data })
});

好了,就这么简单
上面提到的,要识别什么类型语言的话在下面的地址找
https://github.com/naptha/tesseract.js/blob/master/docs/tesseract_lang_list.md
找到对应语言的简写填写对应简写参数就行了

参数部分,(类似classify_bln_numeric_mode的东东) ,下面的网址也有详细描述,简单点说,针对相关的参数进行调整,可以更好哋使用这个插件,例如调试等等,调得好还可以提高识别率,估计有两百个可以调整的参数,66666
https://github.com/naptha/tesseract.js/blob/master/docs/tesseract_parameters.md

当然,这里有个问题,直接用上面的简单例子是可以识别,但是速度是个问题
因为Tesseract.js还依赖其他包,识别的时候会在线加载相应的东东,有在git下载同学就知道了,dist里面还有worker.js这个文件,以及另外的index.js文件
所以如果要加速的话可以这样,引入本地文件

//这里面都引入本地的包就行了,langPath是存放语言包的路径
window.Tesseract = Tesseract.create({
    workerPath: '/path/to/worker.js',
    langPath: 'https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/',
    corePath: 'https://cdn.rawgit.com/naptha/tesseract.js-core/0.1.0/index.js',
})
.recognize("getCaptcha.jpg", {
	lang: "eng",
	classify_bln_numeric_mode: 1
})
.progress(function(packet){
	//progressUpdate(packet)
	})
.then(function(data){
	alert(data.text);
	//progressUpdate({ status: 'done', data: data })
});
好了,除了这个还发现有ocrad.js这个,有兴趣的可以研究研究
最后:识别哔哩哔哩数学题自动领瓜子的插件做不成,因为这无论用什么语言都识别不出来,参数微调部分也不行,识别率太低,20个能准确识别出一个左右,还是改用其他方法吧~~~~写完看直播去~
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Tesseract.js是一个基于Google开发的OCR引擎Tesseract的JavaScript库,可以在浏览器和Node.js环境中使用。React是一个由Facebook开发的用于构建用户界面的JavaScript库。在React应用程序中使用Tesseract.js可以使您的应用程序具有识别图像文本的能力。 以下是使用Tesseract.js在React应用程序中识别图像文本的详细步骤: 1. 首先,您需要安装Tesseract.js库。在您的React应用程序中,可以使用npm或yarn进行安装。使用以下命令进行安装: ``` npm install tesseract.js ``` 2. 接下来,您需要导入Tesseract.js库。您可以使用以下代码将其导入到React组件中: ```javascript import Tesseract from 'tesseract.js'; ``` 3. 然后,您需要创建一个函数,该函数将处理图像并将其传递给Tesseract.js以进行文本识别。您可以使用以下代码创建一个名为recognizeText的函数: ```javascript const recognizeText = async (image) => { const result = await Tesseract.recognize(image, 'eng'); return result.data.text; }; ``` 在上面的代码中,我们将image和'eng'作为参数传递给Tesseract.recognize()方法。image参数是要识别的图像,'eng'参数是要使用的语言。您可以根据需要更改这些参数。 4. 接下来,您需要在React组件中使用recognizeText函数。您可以在React组件的事件处理程序中使用它。例如,以下是一个名为handleImageUpload的事件处理程序,该处理程序将在选择图像时调用recognizeText函数并将结果存储在React状态中: ```javascript handleImageUpload = async (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = async () => { const image = new Image(); image.src = reader.result; image.onload = async () => { const result = await recognizeText(image); this.setState({ text: result }); }; }; reader.readAsDataURL(file); }; ``` 在上面的代码中,我们使用FileReader读取选定的图像文件。然后,我们创建一个新的Image对象,并将其设置为从文件读取的结果。最后,我们在图像加载完成后调用recognizeText函数,并将结果存储在React状态中。 5. 最后,您可以在React组件的render方法中使用识别的文本。例如,以下是一个简单的render方法,该方法将识别的文本显示在屏幕上: ```javascript render() { return ( <div> <input type="file" onChange={this.handleImageUpload} /> <p>{this.state.text}</p> </div> ); } ``` 在上面的代码中,我们将handleImageUpload事件处理程序分配给文件上传输入。然后,我们使用this.state.text显示识别的文本。 这就是在React应用程序中使用Tesseract.js识别图像文本的基本步骤。您可以根据需要自定义这些代码以满足您的需求。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值