当前位置：首页 > news >正文

react+Tesseract.js实现前端拍照获取/选择文件等文字识别OCR

news 来源：原创 2025/9/14 21:37:41

需求背景

在开发过程中可能会存在用户上传一张图片后下方需要自己识别出来文字数字等信息，有的时候会通过后端来识别后返回，但是也会存在纯前端去识别的情况，这个时候就需要使用到Tesseract.js这个库了附Tesseract.js官方（https://github.com/naptha/tesseract.js）

实现过程

主要的实现代码部分和这部分的简易效果图

import {createWorker} from 'tesseract.js';const worker = await createWorker();
await worker.loadLanguage('chi_sim');
await worker.initialize('chi_sim');
const { data: { text } } = await worker.recognize(myImage);
console.log(text);
await worker.terminate();

下方是一个简单的完整实现案例 ⬇

npm install tesseract.js

1. createWorker创建worker实例。

2. 调用worker.loadLanguage('chi_sim')。

3. 调用worker.initialize('chi_sim')。

4. 然后调用recognize方法进行识别。

import React, { useState, useEffect } from 'react';
import { createWorker } from 'tesseract.js';const OCRComponent = () => {const [image, setImage] = useState(null);const [text, setText] = useState('');const [progress, setProgress] = useState(0);const [error, setError] = useState('');const [worker, setWorker] = useState(null);// 初始化 WorkeruseEffect(() => {const initializeWorker = async () => {const newWorker = await createWorker();setWorker(newWorker);};initializeWorker();return () => {if (worker) {worker.terminate();}};}, []);// 处理图片上传const handleImageUpload = (e) => {const file = e.target.files[0];if (file) {const reader = new FileReader();reader.onloadend = () => {setImage(reader.result);};reader.readAsDataURL(file);setText('');setError('');}};// 执行 OCR 识别const recognizeText = async () => {if (!worker || !image) return;try {//chi_sim代表的是简体中文包  eng是英文  需要识别其他语言的话可以官网去看下对应的名称await worker.loadLanguage('chi_sim');await worker.initialize('chi_sim');const { data: { text } } = await worker.recognize(image, {logger: (m) => {if (m.status === 'recognizing text') {setProgress(Math.round(m.progress * 100));}}});setText(text);} catch (err) {setError('识别失败，请重试或更换图片。');console.error(err);} finally {await worker.terminate();}};return (<div><h1>中文 OCR 文字识别</h1>{/* 文件上传 */}<input type="file" accept="image/*" onChange={handleImageUpload} />{/* 图片预览 */}{image && (<div><h3>图片预览</h3><img src={image} alt="预览" style={{ maxWidth: '100%', height: 'auto' }} /></div>)}{/* 识别按钮及进度 */}{image && (<div><button onClick={recognizeText} disabled={progress > 0}>{progress > 0 ? `识别中... ${progress}%` : '开始识别'}</button></div>)}{/* 显示结果 */}{text && (<div><h3>识别结果</h3><pre style={{ whiteSpace: 'pre-wrap' }}>{text}</pre></div>)}{/* 错误提示 */}{error && <p style={{ color: 'red' }}>{error}</p>}</div>);
};export default OCRComponent;

react+Tesseract.js实现前端拍照获取/选择文件等文字识别OCR

需求背景在开发过程中可能会存在用户上传一张图片后下方需要自己识别出来文字数字等信息，有的时候会通过后端来识别后返回，但是也会存在纯前端去识别的情况，这个时候就需要使用到Tesseract.js这个库了附Tesseract.js官方（htt…...

编程日记 2025/9/14 21:37:41

go:实现最简单区块链

1.新建文件夹命名为blockchain,在此文件夹下分别创建两个文件一个为block.go另一个为chain.go如下图所示: 2.写入代码: block.go package blockchainimport ("bytes""crypto/sha256""encoding/gob""log""strconv""ti…...

编程日记 2025/9/14 21:25:31

使用Python写入JSON、XML和YAML数据到Excel文件

在当今数据驱动的技术生态中，JSON、XML和YAML作为主流结构化数据格式，因其层次化表达能力和跨平台兼容性，已成为系统间数据交换的通用载体。然而，当需要将这类半结构化数据转化为具备直观可视化、动态计算和协作共享特性的载体时&…...

编程日记 2025/9/14 21:37:39

如何使用通义灵码玩转Linux - AI编程助手提升效率

一、引言 Linux 作为服务器常用的操作系统，其命令行界面、繁多的命令以及需要进行的配置等，都给初学者带来了不小的挑战。为了帮助初学者快速上手 Linux，本文将介绍如何使用通义灵码这一智能编码助手，提升在 Linux 环境下的开发效…...

编程日记 2025/9/14 21:34:45

主服务器和子服务器之间通过NFS实现文件夹共享

背景： 子服务器想做一个备份服务器但是之前有很多文件是上传到本地的，于是服务要从本地读取文件但是在不在同一台服务器中，读取就会有问题，想实现在两者之间创建一个共享文件夹一 NFS挂载步骤： 在主服务器&#…...

编程日记 2025/9/14 21:26:24

前端知识点---防抖(javascript)

什么是防抖 ? 防抖:单位时间内，频繁触发事件，只执行最后一次举例: 百度输入框, 输入一个字母下面就会有提示输入第二个字母下面的提示就会变而别的浏览器只有在你输入结束之后才出现提示, 这就是做了防抖处理使用场景: 搜索框搜索输入。只需用户…...

编程日记 2025/9/8 9:41:45

django rest framework相关面试题

django rest framework相关面试题 1.什么是restful规范 link link link link...

编程日记 2025/9/14 21:25:33

突破性能瓶颈：Java微服务多任务管理的架构设计与实践

摘要本文深度解析Java微服务架构下的多任务管理机制，围绕串行任务、并行任务及跨服务器协同三大核心场景，结合线程池、任务队列、分布式调度算法等关键技术，探讨如何通过精细化的任务拆分、资源调度和容错设计实现系统高吞吐与低延迟。关…...

编程日记 2025/9/14 21:26:23

为啥物联网用MQTT？

前言都说物联网用MQTT，那分别使用Http和Mqtt发送“Hello”，比较一下就知道啦 HTTP HTTP请求报文由请求行、头部字段和消息体组成。一个最简单的HTTP POST请求如下： POST / HTTP/1.1 Host: example.com Content-Length: 5 Content-Type: …...

编程日记 2025/9/14 21:33:58

onenote的使用技巧以及不足之处

OneNote我用了三年了，感觉这软件还是记一些手写笔记会比较好吧，记和编程有关的就显然不如markdown了， 插入公式： 按alt输入公式，再按退出公式输入不足之处： onenote是我用了很长时间的一款笔记软件&…...

编程日记 2025/9/14 21:26:22

人工智能在医疗设备中的最新应用案例与技术挑战？

人工智能（AI）在医疗设备中的应用正以前所未有的速度发展，带来了许多创新和改进。以下是一些最新的应用案例和相关的技术挑战： 最新应用案例智能诊断和成像： AI技术在医学影像分析中得到了广泛应用。通过深度学习算法…...

编程日记 2025/9/14 3:32:08

TDengine 语言连接器（Rust）

简介 taos 是 TDengine 的官方 Rust 语言连接器，Rust 开发人员可以通过它开发存取 TDengine 数据库的应用软件。该 Rust 连接器的源码托管在 GitHub。 Rust 版本兼容性支持 Rust 1.70 及以上版本。支持的平台原生连接支持的平台和 TDengine 客户端驱动支持…...

编程日记 2025/9/14 21:34:46

Leetcode 58. 最后一个单词的长度

给你一个字符串 s，由若干单词组成，单词前后用一些空格字符隔开。返回字符串中最后一个单词的长度。单词是指仅由字母组成、不包含任何空格字符的最大子字符串。示例 1： 输入：s "Hello World" 输出：5…...

编程日记 2025/9/14 21:34:44

如何使用CAPL解析YAML文件？

🍅 我是蚂蚁小兵，专注于车载诊断领域，尤其擅长于对CANoe工具的使用🍅 寻找组织 ，答疑解惑，摸鱼聊天，博客源码，点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…...

编程日记 2025/9/14 21:26:24

如何让老电脑运行快些(极限榨干老电脑硬件)

要让老电脑运行更快，可以通过增加虚拟内存、优化系统设置和硬件升级等方法实现。以下是具体建议： 1. 增加虚拟内存（适合硬盘空间大的老电脑） 虚拟内存（页面文件）是硬盘上的一部分空间，用于扩展…...

编程日记 2025/9/14 21:37:40

C++在嵌入式中表现如何？

C在嵌入式中表现如何？ 作为一个从机械转行到嵌入式开发的老兵，我深深体会到了C在嵌入式领域的独特魅力与挑战。从最初在厦门某马写单片机代码时的纯C语言，到后来在世界500强外企开发汽车电子项目时大量使用C，这些年的经历让我对这…...

编程日记 2025/9/12 17:46:14

Elasticsearch 系列专题 - 第四篇：聚合分析

聚合（Aggregation）是 Elasticsearch 的强大功能之一，允许你对数据进行分组、统计和分析。本篇将从基础到高级逐步讲解聚合的使用，并结合实际案例展示其应用。 1. 聚合基础 1.1 什么是聚合（Aggregation）？聚合是对文档集合的统计分析，类似于 SQL 中的 GROUP BY 和聚合…...

编程日记 2025/9/14 21:25:32

TensorFlow充分并行化使用CPU

关键字：TensorFlow 并行化、TensorFlow CPU多线程场景：在没有GPU或者GPU性能一般、环境不可用的机器上，对于多核CPU，有时TensorFlow或上层的Keras默认并没有完全利用机器的计算能力（CPU占用没有接近100%）…...

编程日记 2025/9/14 1:30:56

JAVA Web_定义Servlet_1 欢迎考生

题目假定：本地服务器（127.0.0.1）上有一名为jspExam的Web项目，现按要求定义一Servlet，实现以下功能： 1）Servlet的类名自定义，假定可以用以下url访问该Servlet, http://127.0.0.1:80…...

编程日记 2025/9/14 21:26:22

鸿蒙NEXT开发Emitter工具类（ArkTs）

import { emitter } from kit.BasicServicesKit;/*** TODO Emitter工具类（进行线程间通信）* author: 鸿蒙布道师* since: 2025/04/11*/ export class EmitterUtil {/*** 发送事件* param eventId 事件ID，string类型的eventId不支持空字符串。…...

编程日记 2025/9/10 6:32:26

vue3项目引入tailwindcss vue3 vite tailwindcss3 版本初始化项目 npm create vitelatest --template vue cd vue npm install npm run dev安装tailwindcss3 和 postcss 引入 npm install -D tailwindcss3 postcss autoprefixer // 初始化引用 npx tailwindcss init -p…...

编程日记 2025/9/8 13:32:48

Quartz修仙指南：从定时任务萌新到调度大能的终极奥义

各位被Thread.sleep()和ScheduledExecutorService折磨的道友们！今天要解锁的是Java界任务调度至尊法宝——Quartz！这货能让你像玉皇大帝安排天庭日程一样，精确控制每个任务的执行时机！准备好告别蹩脚的手动定时器了吗？…...

编程日记 2025/9/11 14:22:33

Process Explorer 性能调优实战：精准定位资源泄漏与高负载进程

一、下载与安装 ‌下载地址‌ Process Explorer安装包下载：https://pan.quark.cn/s/950c36ba5364下载后解压压缩包，运行 procexp.exe（32 位系统）或 procexp64.exe（64 位系统）‌。 ‌界面概览‌ 主界面以树…...

编程日记 2025/9/11 14:25:03

Docker 常用命令指南

Docker 提供了丰富的命令行工具来管理镜像、容器、网络和数据卷等资源。本指南按类别整理 Docker 的常用命令，并为每个命令提供简体中文说明和示例，以帮助您快速查询和掌握日常使用。 1. 镜像管理 Docker 镜像（Image）是打包好的应用程序及其依赖环境，可用于创建容器。常用…...

编程日记 2025/9/9 1:31:28

3.1A、34V DC/DC 同步降压转换器WD5034

以下是对 WD5034 相关内容的编辑： WD5034 是一款性能卓越的高效率、单片同步降压 DC/DC 转换器，凭借其先进的恒定频率、平均电流模式控制架构，在众多电源管理芯片中脱颖而出。以下是其详细特点和优势： 出色的负载能力：…...

编程日记 2025/9/4 1:20:48

面向对象高级(1)

文章目录 final认识final关键字修饰类：修饰方法：修饰变量final修饰变量的注意事项常量单例类什么是设计模式？单例怎么写?饿汉式单例的特点是什么？单例有啥应用场景，有啥好处？懒汉式单例类。枚举类认识枚…...

编程日记 2025/9/11 7:19:14

Vim 编辑器的常用快捷键介绍

以下是 Vim 编辑器的常用快捷键分类介绍，帮助你快速掌握高效编辑技巧： 一、基础模式切换 Vim 的核心是模式化操作，常用模式包括： 普通模式（默认）：导航、命令输入。插入模式：输入/…...

编程日记 2025/9/13 19:00:40

如何使用AI辅助开发R语言

R语言是一种用于统计计算和图形生成的编程语言和软件环境，很多学术研究和数据分析的科学家和统计学家更青睐于它。但对与没有编程基础的初学者而言，R语言也是有一定使用难度的。不过现在有了通义灵码辅助编写R语言代码，我们完全可以用自然语言…...

编程日记 2025/9/8 14:01:17

docker 运行自定义化的服务-后端

docker 运行自定义化的服务-前端-CSDN博客运行自定义化的后端服务具体如下： ①打包后端项目，形成jar包 ②编写dockerfile文件，文件内容如下： # 使用官方 OpenJDK 镜像 FROM jdk8:1.8LABEL maintainer"ATB" version&…...

编程日记 2025/9/11 22:44:49

【Grok 大模型深度解析】第二期：架构探秘与训练哲学

在上一期的内容中，我们对 Grok 大模型从技术溯源的角度，了解了它从 Transformer 架构局限性出发，迈向混合架构创新的历程，同时也梳理了从 Grok - 1 到 Grok - 3 的版本迭代所带来的技术跃迁以及其独特的差异化优势。这一期，我们将深入到 Grok 大模型的架构内部，探究其精妙…...

编程日记 2025/9/9 16:49:15

oracle update 原理

Oracle 11g 中的 UPDATE 操作是数据库修改数据的关键机制，其核心原理涉及事务管理、多版本并发控制（MVCC）、Undo/Redo 日志、锁机制等 1. 执行前的准备 SQL 解析与执行计划： Oracle 解析 UPDATE 语句，生成执行计划&…...

编程日记 2025/9/10 19:46:35

优化项目缓慢卡顿

大家好，好久不见，因为最近在搞几个老项目，没怎么跟大家见面。在做老项目的时候发现了一些小问题拿出来跟大家分享分享。因为这个问题是生产环境下面出现的，所以在开发环境的时候很难发现，而且网速快的话也很难发现&a…...

编程日记 2025/9/11 19:56:43

【黑客帝国连接虚拟与现实：数据采集系统（DAQ）硬核技术深度解析】

1. DAQ系统核心架构：从物理世界到数字域的精密映射 1.1 传感器与信号调理：物理量到电信号的精准转换传感器的物理原理与非线性补偿热电偶（Thermocouple）：基于塞贝克效应，其输出电压与温度差的非线性关系…...

编程日记 2025/9/14 7:31:06

解决unity设置鼠标图标发布以后没有效果的问题

public Texture2D dragCursor; Cursor.SetCursor(dragCursor, Vector2.zero, CursorMode.Auto); 首先设置一个Texture2D的变量，用来保存自己想要设置的图，然后将鼠标设置为自己定义的图片。原本是很简单的功能，而且在编辑器里面运行也正常。…...

编程日记 2025/9/9 1:31:29

CExercise_10_1动态数组Vector

题目： 动手自己实现动态数组Vector，基于以下结构体定义和函数声明： typedef int ElementType; typedef struct { ElementType *data; // 指向堆空间的数组 int size; // 元素的个数 int capacity; // 数组的容量 } Vector; // 请实现下面方法…...

编程日记 2025/9/9 16:02:12

Nextra + TypeScript + MDX 项目的完整目录结构

典型的 Nextra TypeScript MDX 博客项目的完整目录结构。 Pages 架构 my-blog/ ├── components/ # React 组件 │ ├── HelloWorld.tsx # 示例组件 │ └── ... # 其他组件 ├── pages/ # 页面…...

编程日记 2025/9/4 20:44:30

MDM功能演示：远程锁定与数据擦除，保障企业移动设备安全

在当今高度互联的商业环境中，企业数据伴随着员工穿梭于不同城市、时区和设备之间。智能手机、平板电脑和笔记本电脑赋予员工随时随地办公的能力，但也带来了新的安全挑战：设备一旦遗失或落入不当之手，企业数据就面临泄露风险。无…...

编程日记 2025/9/12 7:53:02

快速idea本地和推送到远程仓库

在你需要推送的那个文件夹打开 #创建本地仓库 git init#添加文件并首次提交 git add . git commit -m "Initial commit"#添加远程仓库地址 git remote add origin https://gitee.com/你的用户名/你的仓库名.git#查看远程仓库是否设置chengg git remote -v#原来远程仓…...

编程日记 2025/9/10 12:28:00

django数据迁移操作受阻

错误信息： django.db.utils.OperationalError: (1227, Access denied; you need (at least one of) the SYSTEM_VARIABLES_ADMIN or SESSION_VARIABLES_ADMIN privilege(s) for this operation)根据错误信息分析，该问题是由于MySQL用户缺乏SYSTEM_VARI…...

编程日记 2025/9/7 20:04:35

使用Lombok的@Slf4j和idea构建:找不到log符号-解决

问题：在使用Lombok的Slf4j构建项目时提示如下内容： MvcConfiguration.java:26:9 java: cannot find symbol symbol: variable log location: class cn.edu.wynu.mrcinerec.mrserver.config.WebMvcConfiguration查了网上的方法都是改配置但是使用Googl…...

编程日记 2025/9/10 0:08:09

物联网传感器技术架构与功能解析

物联网传感器作为物联网体系的关键组成部分，主要承担环境或物体状态信息的捕获与传输功能。其通过检测物理、化学或生物参数，将模拟信号转化为数字格式，并利用多种通信协议实现数据交互，最终服务于各类智能化应用。核心功能模块分…...

编程日记 2025/9/8 6:48:14

wx213基于php+vue+uniapp的新闻资讯小程序

开发语言：PHP框架：phpuniapp数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：PhpStorm 系统展示管理员登录界面管理员功能界面新闻类别管理新闻信息管理用户管理管理员管…...

编程日记 2025/9/12 10:12:49

SOEM编译Ubuntu 22.04

下载SOEM源码 $ git clone https://github.com/OpenEtherCATsociety/SOEM.git编译源码进入SOEM源码目录 $ mkdir build && cd build $ cmake .. $ make测试 eth1 位网卡名 $ cd test/linux/slaveinfo/ $ sudo ./slaveinfo eth1SOEM (Simple Open EtherCAT Master) …...

编程日记 2025/9/10 1:27:02

栈和队列（Stack和Queue）

栈和队列（Stack和Queue） 1：栈的概念示意图： 2：创建一个类Stack，给定一个整形数组elem，数组已使用长度usedSize，默认长度default_size为10，再给定一个构造方法&#xff0…...

编程日记 2025/9/12 14:23:54

Django的定制以及admin

Django是一个全面的Python Web开发框架，具有丰富的功能，和众多开箱即用的接口。简单使用我们使用Django的django-admin工具创建项目： django-admin startproject project1 cd project1 django-admin startapp app1以后，一个简…...

编程日记 2025/9/13 4:03:54

LLM架构解析：编码器-解码器架构（Encoder-Decoder Architecture）（第四部分）—— 从基础原理到实践应用的深度探索

本专栏深入探究从循环神经网络（RNN）到Transformer等自然语言处理（NLP）模型的架构，以及基于这些模型构建的应用程序。本系列文章内容： NLP自然语言处理基础词嵌入（Word Embeddings&#xff09…...

编程日记 2025/9/13 18:21:21

Unity VideoPlayer 播放无声音

增加一个videoPlayer下挂，audiorSource脚本 this.videoPlayer.EnableAudioTrack(0, true); this.videoPlayer.audioOutputMode VideoAudioOutputMode.AudioSource; this.videoPlayer.SetTargetAudioSource(0, this.videoPlayer.GetComponent<AudioSource>()…...

编程日记 2025/9/11 1:14:31

【Kafka基础】监控与维护：动态配置管理，灵活调整集群行为

1 基础配置操作 1.1 修改主题保留时间 /export/home/kafka_zk/kafka_2.13-2.7.1/bin/kafka-configs.sh --alter \--bootstrap-server 192.168.10.33:9092 \--entity-type topics \--entity-name yourtopic \--add-config retention.ms86400000 参数说明： retention…...

编程日记 2025/9/9 15:08:58

AutoGen深度解析：从核心架构到多智能体协作的完整指南

AutoGen是微软推出的一个革命性多智能体(Multi-Agent)框架，它通过模块化设计和灵活的对话机制，极大地简化了基于大型语言模型(LLM)的智能体系统开发。本文将深入剖析AutoGen的两个核心模块——core基础架构和agentchat多智能体对话系统，带您全…...

编程日记 2025/9/6 16:56:24

接口请求控制工具

接口请求控制工具功能说明代理转发安全控制访问控制错误处理配置管理日志管理技术栈快速开始环境要求配置说明启动服务工具源码功能说明代理转发支持多路由配置支持静态资源代理灵活的路由规则配置支持请求转发和响应处理支持负载均衡支持多目标服务器配置提供多种负载…...

编程日记 2025/9/13 22:51:03

需求背景

实现过程

相关文章：