vue中使用tesseract实现OCR/文字识别(识别图片中的文字)

文章目录

  • tesseract在线使用
    • npm安装依赖:
    • 页面引入:
    • js方法:
  • tesseract离线使用
    • 克隆仓库
    • 拷贝 worker.min.js和tesseract-core.wasm.js
    • index.html 引入tesseract.min.js
    • 下载语言包
    • 文件不上传文件服务器
    • js方法
    • 优化

tesseract官网地址:https://tesseract.projectnaptha.com/

github:https://github.com/naptha/tesseract.js#tesseractjs

tesseract在线使用

npm安装依赖:

npm install tesseract.js

页面引入:

import Tesseract from 'tesseract.js'

js方法:

url : 图像地址
language: 语种 参数 chi_sim eng jpn

// recognize 第一个参数:图像,第二个:语种
Tesseract.recognize(url,language,//  { logger: m => console.log(m) }
).then((d) => {console.log(d.data.text);ocrStr.value = d.data.text
})

tesseract离线使用

克隆仓库

https://gitcode.net/mirrors/jeromewu/tesseract.js-offline.git

执行 npm install

拷贝 worker.min.js和tesseract-core.wasm.js

在public文件夹下新建tesseract,将刚刚克隆的项目里面的node_modules/tesseract.js/dist/worker.min.js和node_modules/tesseract.js-core/tesseract-core.wasm.js两个js文件拷贝到tesseract文件夹下

index.html 引入tesseract.min.js

<script src="/tesseract/tesseract.min.js"></script>

下载语言包

下载地址: https://github.com/naptha/tessdata/tree/gh-pages/4.0.0
可根据自行选择版本下载
如 https://github.com/naptha/tessdata/blob/gh-pages/4.0.0/chi_sim.traineddata.gz
https://github.com/naptha/tessdata/blob/gh-pages/4.0.0/eng.traineddata.gz

下载完成后,拷贝到tesseract/lang-data文件夹下

文件不上传文件服务器

          <input type="file" name="file" accept="image/png, image/jpeg, image/jpg" @change="change" style="margin-top: 30px"/>

可使用URL.createObjectURL将上传的文件生成临时url

    change() {//生成的临时urlconst url = URL.createObjectURL(document.querySelector('input[type=file]').files[0]);this.recognize(url);},

js方法

<script >
//为了在普通函数和ascyn函数中都能调用
let worker; 
export default {name: "index",data(){return {}},methods: {//url 图片地址async recognize(url) {let that = this //避免this指向问题worker = Tesseract.createWorker({/*        logger: m => {that.progress = m.progressthat.status = m.status},*///配置本地资源路径,语言包的实际位置是通过langPath+'/'+lang+'.traineddata.gz'得到的,所以不要改语言包文件名workerPath: '/tesseract/worker.min.js',corePath: '/tesseract/tesseract-core.wasm.js',langPath: '/tesseract/lang-data'})//调用async recognizeOcr函数进行识别let data = await this.recognizeOcr(url);console.log(data.data.text);},//url 图片地址async recognizeOcr(url){await worker.load();//可以通过'+'设置多个语言await worker.loadLanguage('chi_sim+eng+jpn'); await worker.initialize('chi_sim+eng+jpn');const data = await worker.recognize(url);return data;}}
}
</script>

优化

tesseract.j、lang-data、tesseract.js-core文件较大,以后项目npm run build和部署到服务器时都会比较慢,故建议有条件的同学放到cdn托管。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webrtc QOS方法二.4(flexfec 实现可优化点)

一、冗余报文和媒体报文组织结构优化点 以单帧10个媒体报文&#xff0c;冗余度20%为例。这里webrtc输出要有10个媒体包2个冗余包。webrtc输出的报文序列如下&#xff1a; 代码实现如下&#xff1a; UlpfecGenerator::AddPacketAndGenerateFec&#xff1a;攒够足够的帧 Forwar…

【Kafka源码走读】Admin接口的客户端与服务端的连接流程

注&#xff1a;本文对应的kafka的源码的版本是trunk分支。写这篇文章的主要目的是当作自己阅读源码之后的笔记&#xff0c;写的有点凌乱&#xff0c;还望大佬们海涵&#xff0c;多谢&#xff01; 最近在写一个Web版的kafka客户端工具&#xff0c;然后查看Kafka官网&#xff0c;…

Android 屏幕适配各种宽高比的手机

由于android 手机的屏幕宽高比样式太多了&#xff0c;在设计UI时&#xff0c;很多时候&#xff0c;会因为宽高比&#xff0c;分辨率不同会有展示上的差异。 我是这样解决的 在activity的onCreate方法前&#xff0c;调用&#xff1a; fun screenFit(context: Context) {val me…

系统架构设计师-软件架构设计(2)

目录 一、基于架构的软件开发方法&#xff08;ABSD&#xff09; 1、架构需求 1.1 需求获取 1.2 标识构件 1.3 架构需求评审 2、架构设计 2.1 提出架构模型 2.2 映射构件 2.3 分析构件的相互作用 2.4 产生架构 2.5 设计评审 3、架构文档化 4、架构复审 5、架构实现 5.1 分析与…

获取大疆无人机的飞控记录数据并绘制曲线

机型M350RTK&#xff0c;其飞行记录文件为加密的&#xff0c;我的完善代码如下 gitgithub.com:huashu996/DJFlightRecordParsing2TXT.git 一、下载安装官方的DJIFlightRecord git clone gitgithub.com:dji-sdk/FlightRecordParsingLib.git飞行记录文件在打开【我的电脑】&am…

结构型设计模式之装饰器模式【设计模式系列】

系列文章目录 C技能系列 Linux通信架构系列 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 设计模式系列 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everythi…

Java设计模式-组合模式

组合模式 1.组合模式含义 组合模式&#xff0c;将对象组合成树形结以表示部分-整体的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性 组合模式可以简单的理解为将各个单独的小对象&#xff0c;通过组合模式&#xff0c;组合成一个大的对象&#xff0c;这个…

LiveNVR监控流媒体Onvif/RTSP功能-支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出

LiveNVR支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出 1、无人机推流转国标2、获取RTMP推流地址2.1、RTMP推流地址格式2.2、推流地址示例 2、设备RTMP推流3、配置拉转RTMP3.1、直播流地址格式3.2、直播流地地址示例3.3、通道配置直播流地址 4、配置级联…

深入浅出多种开发语言对接淘宝京东1688阿里巴巴等电商平台,获取实时商品详情数据API接口介绍

api接口详解大全?优秀的设计是产品变得卓越的原因设计API意味着提供有效的接口&#xff0c;可以帮助API使用者更好地了解、使用和集成&#xff0c;同时帮助人们有效地维护它每个产品都需要使用手册&#xff0c;API也不例外在API领域&#xff0c;可以将设计视为服务器和客户端之…

IDE /完整分析C4819编译错误的本质原因

文章目录 概述基本概念代码页标识符字符集和字符编码方案源字符集和执行字符集 编译器使用的字符集VS字符集配置 有何作用编译器 - 源字符集编译器 -执行字符集 Qt Creator下配置MSVC编译器参数动态库DLL字符集配置不同于可执行程序EXE总结 概述 本文将从根本原因上来分析和解…

属猴人性格及一生运势怎么样?

生肖属猴的人聪明&#xff0c;才华出众&#xff0c;是个非常会处理人际关系的生肖&#xff0c; 开朗&#xff0c;大方&#xff0c;人缘好&#xff0c;而且能说会道&#xff0c;嘴巴甜&#xff0c;也特别擅长社交&#xff0c;喜欢热闹&#xff0c; 所以属猴人不管在哪都容易受到…

数仓学习---13、报表数据导出

星光下的赶路人star的个人主页 莫见长安行乐处&#xff0c;空令岁月易蹉跎 文章目录 一、报表数据导出1.1 MySQL建库建表1.1.1 创建数据库1.1.2 创建表 1.2 数据导出1.2.1 DataX配置文件生成脚本1.2.2 编写每日导出脚本 一、报表数据导出 为方便报表应用使用数据&#xff0c;需…

Java诊断利器 Arthas-- 一款释放潜力的神器

嘿&#xff0c;你是不是对Java开发中的调试和诊断问题感到头疼&#xff1f; 别担心&#xff0c;我要告诉你一个秘密武器&#xff01;它就像是一位超级英雄&#xff0c;能够释放你的潜力&#xff0c;解决你的烦恼&#xff01;它的名字叫做Arthas&#xff0c;是一款Java诊断利器…

手写Nacos基本原理——服务注册 配置管理

手写Nacos基本原理 一、背景介绍二、 思路方案三、过程nacosService代码pom文件配置文件具体类 nacosSDK代码pom文件配置类具体类 serviceA代码pom文件配置文件具体类 serviceB代码pom文件配置文件具体类 实现效果四、总结五、升华 一、背景介绍 之前在项目开发的过程中&#…

Spring Cache的介绍以及使用方法、常用注解

一、Spring Cache介绍 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能. Spring Cache提供了一层抽象&#xff0c;底层可以切换不同的cache实现。具体就是通过CacheManager接口来统一不同的缓存…

C# List 详解五

目录 26.GetType() 27.IndexOf(T) 28.IndexOf(T, Int32) 29.IndexOf(T, Int32, Int32) 30.Insert(Int32, T) 31.InsertRange(Int32, IEnumerable) 32.LastIndexOf(T) 33.LastIndexOf(T, Int32) 34.LastIndexOf(T, Int32, Int32) …

【CAS6.6源码解析】调试Rest API接口

CAS的web层默认是基于webflow实现的&#xff0c;ui和后端是耦合在一起的&#xff0c;做前后端分离调用和调试的时候不太方便。但是好在CAS已经添加了支持Rest API的support模块&#xff0c;添加相应模块即可。 文章目录 添加依赖并重新build效果 添加依赖并重新build 具体添加…

32位Cortex-M4 MCU:LPC54607J256ET180E、LPC54605J512BD100K 180MHz嵌入式微控制器

LPC546xx 32 位微控制器(MCU) 具有丰富的外设集、极低的功耗和增强的调试功能。 LPC546xx MCU系列采用ARM Cortex-M4内核&#xff0c;可提供以太网支持&#xff0c;并设有一个TFT LCD控制器和两个CAN FD模块。LPC546xx MCU旨在提高灵活性和性能可扩展性&#xff0c;可提供高达1…

http-为什么文件上传要转成Base64

# 前言 最近在开发中遇到文件上传采用Base64的方式上传&#xff0c;记得以前刚开始学http上传文件的时候&#xff0c;都是通过content-type为multipart/form-data方式直接上传二进制文件&#xff0c;我们知道都通过网络传输最终只能传输二进制流&#xff0c;所以毫无疑问他们本…

【数据库SQLite】SQLite 约束

约束是在表的数据列上强制执行的规则。这些是用来限制可以插入到表中的数据类型。这确保了数据库中数据的准确性和可靠性。约束可以是列级或表级。列级约束仅适用于列&#xff0c;表级约束被应用到整个表。 常见 SQLite 约束汇总&#xff1a; NOT NULL 约束&#xff1a;确保某…