使用tesseract.js插件实现前端js识别提取图片的文字

news2024/11/13 11:14:22

在这里插入图片描述

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图像OCR Tesseract.js 测试</title>
		<script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
	</head>
	<body>
		<input type="file" id="file-inp" accept="image/*">
		<img id="preview-img" style="max-width: 100%; margin: 15px; display: none;">
		<div id="ocr-result" style="border: 1px solid; padding: 15px; display: none;" contenteditable></div>

		<script>
			const fileInp = document.querySelector('#file-inp');
			const previewImg = document.querySelector('#preview-img');
			const OCRresult = document.querySelector('#ocr-result');
			
			fileInp.addEventListener('change', function(e) {
				const file = e.target.files[0];
				if (!file) { return; };
				const reader = new FileReader();
				reader.onload = function(e) {
					const image = new Image();
					image.src = e.target.result;
					image.onload = function() {
						previewImg.src = image.src;
						previewImg.style.display = 'block';
						Tesseract.recognize(image,'chi_sim', {
							logger: info => console.log(info)
						}).then(result => {
							console.log('【识别结果】', result);
							if (result?.data?.text) {
								OCRresult.style.display = 'block';
								OCRresult.innerText = result?.data?.text;
							}
						}).catch(error => {
							console.error('【错误】', error);
						});
					};
				};
				reader.readAsDataURL(file);
			});
		</script>
	</body>
</html>

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

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

相关文章

给豆包MarsCode 编程插件点赞

本文正在参加豆包MarsCode测评官征文活动 首先MarsCode 拉新福利还是蛮高的有E卡、周边T恤、肯德基代金券显卡等hahaha…… 略微炫耀一下100京东E卡&#xff0c;真香&#xff01; 活动入口&#xff1a;https://www.marscode.cn/events/s/ihx7hkNY/ 顺手帮忙助个力谢谢~ 2…

人工智能 | 搭建企业内部的大语言模型系统

大纲 开源大语言模型大语言模型管理私有大语言模型服务部署方案 开源大语言模型 担心安全与隐私&#xff1f;可私有部署的开源大模型 商业大模型&#xff0c;不支持私有部署 ChatGPTClaudeGoogle Gemini百度问心一言 开源大模型&#xff0c;支持私有部署 MistralMeta Llama…

ssl 协议工作过程

ssl 协议工作过程 ChatGPT 说&#xff1a; ChatGPT SSL&#xff08;Secure Sockets Layer&#xff09;协议是用来确保网络通信安全的加密协议&#xff0c;已被TLS&#xff08;Transport Layer Security&#xff09;取代&#xff0c;但它的工作过程仍然是理解现代加密协议的重…

【视频教程】GEE-PIE遥感大数据处理与典型案例实践

随着航空、航天、近地空间等多个遥感平台的不断发展&#xff0c;近年来遥感技术突飞猛进。由此&#xff0c;遥感数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量也大幅增长&#xff0c;使其越来越具有大数据特征。对于相关研究而言&#xff0c;遥感大数据的出现为其提…

《开发环境使用HTTPS调试》

&#x1f916; 作者简介&#xff1a;水煮白菜王 &#xff0c;一位资深前端劝退师 &#x1f47b; &#x1f440; 文章专栏&#xff1a; 前端专栏 &#xff0c;记录一下平时在博客写作中&#xff0c;总结出的一些开发技巧✍。 感谢支持&#x1f495;&#x1f495;&#x1f495; 近…

CoreDownload - WordPress文章下载增强插件v1.0.6

文章内下载效果 后台编辑页面 CoreDownload 是一款高级WordPress 下载增强插件&#xff0c;支持几乎所有网盘&#xff0c;为WordPress增加任意下载功能 安装插件后&#xff0c;在设置中全局开启。然后编辑文章&#xff0c;可以在下面找到CoreDownload下载增强功能。 插件下载 …

以太网和WIFI之间的网络切换脚本(Window环境)

网络切换脚本 在本地创建Window的批处理脚本【网络切换脚本.bat】&#xff0c;填入以下内容&#xff0c;然后以管理员身份运行&#xff0c;即可实现以太网和WIFI之间的切换。 echo off netsh interface show interface "WLAN" | find "管理状态: 已启用"…

SLM21814系列SiLM21814CJ-AQ能提供独立的高边、低边输出驱动信号 一款高压、高速的功率MOSFET和IGBT驱动器

SLM21814系列SiLM21814CJ-AQ是一款高压、高速的功率MOSFET和IGBT驱动器&#xff0c;它提供独立的高边、低边输出驱动信号。采用专有的高压集成电路和锁存免疫CMOS技术&#xff0c;提供可靠的单芯片驱动方案。逻辑输入电平与标准CMOS或LSTTL输出兼容&#xff0c;最低支持3.3V逻辑…

家常菜才最适合减肥!最新研究发现,减少外出就餐次数可减少儿童肥胖

虽然老人们都喜欢孩子能“白白胖胖”&#xff0c;但随着生活水平的提高&#xff0c;儿童肥胖已成为一个不可忽视的健康问题。据报道&#xff0c;我国6-17岁儿童青少年超重率和肥胖率分别是11.1%和7.9%&#xff0c;也就是说&#xff0c;几乎每5个中小学生中就有一个小胖墩儿。 有…

如何在算家云搭建Open-Sora1.1(视频生成)

一、Open-Sora1.1简介 Open-Sora 1.1 项目是 Colossal AI 团队开发的一个完全开源的视频生成项目&#xff0c;该项目致力于高效制作高质量视频&#xff0c;并通过开源原则实现先进视频生成技术的低成本普及。 1. 项目背景与目标 Open-Sora 项目旨在通过提供开源的模型、工具…

【Python】数据可视化之核密度

KDEPlot&#xff08;Kernel Density Estimate Plot&#xff0c;核密度估计图&#xff09;是seaborn库中一个用于数据可视化的函数&#xff0c;它基于核密度估计&#xff08;KDE&#xff09;这一非参数统计方法来估计数据的概率密度函数。KDEPlot能够直观地展示数据的分布特征&a…

定点荧光标记蛋白:轻松搞定CAR-T阳性率检测

CAR-T细胞疗法在8月份提前进入“丰收季”。8月27日NMPA官网公示&#xff0c;**国内第五款CAR-T细胞疗法——来自传奇生物的西达基奥仑赛注射液获批上市。**这款靶向BCMA的细胞疗法用于治疗复发或难治性多发性骨髓瘤&#xff08;R/R MM&#xff09;成人患者。同一天&#xff0c;…

NDP协议是怎样帮助IPv6实现网络安全运行的?

在复杂多变的网络环境中&#xff0c;确保各节点之间能够高效、准确地发现与通信&#xff0c;是构建稳定、可扩展网络架构的基石。那么IPv6是依靠什么实现网络安全运行的呢&#xff1f;今天我将就IPv6中的一个重要协议——NDP协议的基本概念及工作原理展开深入分析。 NDP协议的基…

体育馆管理系统|基于SpingBoot+vue的体育馆管理系统(源码+数据库+文档)

体育馆管理系统 目录 基于SpingBootvue的体育馆管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 1登录 2学生管理页面 3系统主界面模块的实现 4器材管理模块的实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…

ICM20948 DMP代码详解(11)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;10&#xff09; 上一回讲解完了icm20948_sensor_setup函数的第1段代码&#xff0c;本回继续往下解析。为了便于理解和回顾&#xff0c;再次贴出icm20948_sensor_setup函数源码&#xff0c;在EMD-App\src\ICM20948\sen…

一文讲清投影,定义投影,投影栅格……

正确的空间坐标系是进行地理分析和处理的基础&#xff0c;投影是其中十分重要的概念。在ArcGIS系列的软件中关于投影的工具有四个&#xff0c;分别是定义投影、投影、投影栅格、批量投影。 你能分清他们吗&#xff1f; 如果不能。别急&#xff0c;下面我来给你一一介绍。 定…

虚拟机卡死问题

升级VMware至15.1.0版本解决Windows 10 1903下VMware Workstation 15 Pro虚拟机死机问题 如题&#xff0c;在几乎全新的Windows 10 1903操作系统下&#xff0c;在VMware Workstation中安装虚拟机经常出现死机现象&#xff0c;主要表现在以下两个方面&#xff1a; 创建好虚拟机后…

【Qt】按钮样式--按钮内部布局(调整按钮文本和图标放置在任意位置)

要求&#xff1a; 有一个按钮&#xff0c;要求按钮的右下角显示开关&#xff0c;点击切换开关状态 ps&#xff1a;注意&#xff0c;要求你添加完了之后&#xff0c;整个按钮的点击区域不变&#xff08;就是说&#xff0c;点击右下角的文本&#xff0c;也可以触发按钮的点击事件…

.net MAUI应用生命周期

.NET Multi-platform App UI (.NET MAUI) 应用通常有四种执行状态&#xff1a;“未运行”、“运行中”、“已停用”和“已停止”。 当应用从未运行状态转换为运行状态、从运行状态转换为已停用状态、从已停用状态转换为已停止状态、从已停止状态转换为运行状态&#xff0c;以及…

四七层如何获取客户端真实地址

7层代理会对报文进行重新封装&#xff0c;封装过程中可以通过增加XFF的header传递客户端IP。4层转发不会修改报文。在不修改HTTP报文前提下&#xff0c;前置补充代理信息, 格式: PROXY TCP 客户端IP 代理端IP 客户端端口 代理端端口。 nginx 七层代理配置&#xff1a; server …