前端小知识:第三方JS库:tesseract.js(基于浏览器性能的离线OCR)

tesseract.js(离线OCR)

概述

仓库地址: https://github.com/naptha/tesseract.js

语言包地址: https://github.com/naptha/tessdata/tree/gh-pages/4.0.0_best

离线OCR仓库地址(使用这个): https://github.com/jeromewu/tesseract.js-offline

API参考: https://github.com/naptha/tesseract.js/blob/master/docs/api.md#worker-load-language

使用教程简单参考: https://blog.csdn.net/qq_35077107/article/details/105341115

使用

//第一步:拉取离线版tesseract.js-offline
git clone https://github.com/jeromewu/tesseract.js-offline.git

//第二部:进入tesseract.js-offline目录,开始安装依赖其实是为了某几个文件而已
cd  tesseract.js-offline
npm install

//第三步:下载对应的语言包放入 /tesseract.js-offline/lang-data中
// 默认lang-data已经有英文、泰语的语言包 == 如果需要中文简体、繁体则需下载
//https://github.com/naptha/tessdata/tree/gh-pages/4.0.0_best
下载中文简体、繁体汉化包

//第四步: 准备一张中文图片 放入 /tesseract.js-offline/images目录中


//第五步:修改   /tesseract.js-offline/browser/index.html 的源码
图片文件为第四步的图片
语言识别支持:英文、中文简体、中文繁体

//第六步:直接启动运行index.html
加载语言包文件报跨域错误

//第七步 -- 将/tesseract.js-offline整个文件夹由Nginx静态代理访问 - 从而避免报跨域问题
//  http://127.0.0.1:9997/browser/index.china.html
访问成功


第二步图片
在这里插入图片描述


第三步图片
在这里插入图片描述


第四步图片 – 直接运行 browser/index.html
在这里插入图片描述


第五步 – 修改测试代码
在这里插入图片描述


第六步 – 直接启动index.html – 报跨域问题
在这里插入图片描述


第七步 – 将/tesseract.js-offline整个文件夹由Nginx静态代理访问 - 从而避免报跨域问题
在这里插入图片描述

在这里插入图片描述

在Vue2中开发应用程序时,如果需要处理离线情况下的图片OCR(Optical Character Recognition,光学字符识别),通常会涉及到前端本地存储和第三方的结合。由于JavaScript本身并不直接支持离线OCR功能,你需要借助一些成熟的,如`tesseract.js`,它是一个在浏览器端运行的Tesseract OCR引擎的封装。 以下是大致步骤: 1. **安装依赖**:首先在项目中安装`tesseract.js`和相关的Promise,比如`axios`用于文件读取和发送请求: ```bash npm install tesseract.js axios file-saver ``` 2. **图片预加载和处理**:在用户离线状态下,先将图片保存到本地,例如使用FileSaver将图片转换为Blob对象: ```javascript const saveImage = (url) => { axios.get(url) .then(response => { const blob = new Blob([response.data], { type: 'image/jpeg' }); saveAs(blob, 'image.jpg'); // 保存图片到本地 }) .catch(err => console.error('Failed to save image:', err)); } // 离线时调用 if (!navigator.onLine) { saveImage('path/to/offline/image'); } ``` 3. **离线OCR识别**:当图片保存后,在`fetch`或`XMLHttpRequest`可用时,尝试从本地读取图像并识别文字: ```javascript const recognizeText = async (file) => { try { const result = await tesseract.recognize(file); return result.text; } catch (error) { console.log('Error during OCR:', error); } } // 比如图片已经保存为file对象 const text = await recognizeText(file); ``` 4. **选择文本**:获取识别后的文本后,你可以提供一个UI让用户选择识别的内容。这可以是弹出框、输入框或者其他交互方式。 请注意,离线OCR可能会受限于浏览器对本地数据的操作权限以及设备性能,并非所有场景都能保证100%准确度。此外,Tesseract.js依赖于开源的Tesseract OCR引擎,对于复杂或难以识别的文字可能效果不佳。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值