【看图识文】[email protected]

最新推荐文章于 2025-05-30 09:10:11 发布
最新推荐文章于 2025-05-30 09:10:11 发布
阅读量1.7k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 工具类 文章标签： javascript 前端 tesseract OCR 看图识文
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuzi007a/article/details/130291800
tesseract.js是一个用于图像文字识别的JavaScript库，擅长英文识别，对中文需要额外训练。文章提供了六个示例，展示了从识别纯英文到中文合同、艺术字等不同场景的使用方法，强调了实际应用中可能需要优化和训练字库，或考虑使用付费服务。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

看图识文

介绍

该库用于识别并获取图片上的文字，支持多种语言。对英文识别度非常高，但是对中文的识别度非常一般。需要单独训练对应的中文库。对白纸黑字的合同文识别度还不错，其他的都不太好。

git地址：

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

下面通过6个小例子来看下用法。使用的时候需要开个服务，在vscode上打开Go Live就行。
在这里插入图片描述

示例一

demo1.png

在这里插入图片描述
demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p {
			width: 300px;
		}
	</style>
</head>
<body>
	<!-- 识别纯英文文字的图片 ok -->
	<p id="log"></p>
	<!-- v4 -->
	<script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
	<script>
		Tesseract.recognize(
			'./images/demo1.png', // 被识别的图片
			'eng', // 识别图片中文字用到的语言
			{ logger: m => console.log(m) }
		).then(({ data: { text } }) => {
			document.getElementById('log').innerHTML = text;
		})
	</script>
</body>
</html>

识别结果：
在这里插入图片描述

示例二

demo2.png
在这里插入图片描述
```demo2.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 识别一个纯英文截图 ok -->
    <p id="log"></p>
    <!-- v4 -->
    <script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
    <script>
        const { createWorker } = Tesseract;


        async function demo2() {
            const worker = await createWorker({
                logger: m => console.log(m)
            });

            work();

            async function work() {
                await worker.loadLanguage('eng'); // 下载语言包
                await worker.initialize('eng'); // 使用的语言
                const { data: { text } } = await worker.recognize('./images/demo2.png');
                document.getElementById('log').innerHTML = text;
                await worker.terminate();
            }
        }

        demo2();
    </script>
</body>
</html>

识别结果：
在这里插入图片描述

示例三

demo3.png
在这里插入图片描述
demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 识别一张打印版中文合同图片 ok -->
    <!-- 该图片的截图也ok -->
    <!-- v4 -->
    <script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
    <script>
        const { createWorker } = Tesseract;

        async function demo2() {
            const worker = await createWorker({
                logger: m => console.log(m)
            });

            work();

            async function work() {
                await worker.loadLanguage('chi_sim'); // 下载简体中文语言包
                await worker.initialize('chi_sim'); // 使用简体中文
                const { data: { text } } = await worker.recognize('./images/demo3.png');
                console.log(text);
                await worker.terminate();
            }
        }

        demo2();
    </script>
</body>
</html>

识别结果：
在这里插入图片描述
很棒，识别出来了。

示例四

demo4.png
在这里插入图片描述
自己写一串文字，然后截图，识别一下试试。
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 浏览器字体 no -->
    <p id="log"></p>
    <!-- v4 -->
    <script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
    <script>
        const { createWorker } = Tesseract;


        async function demo2() {
            const worker = await createWorker({
                logger: m => console.log(m)
            });

            work();

            async function work() {
                await worker.loadLanguage('chi_sim');
                await worker.initialize('chi_sim');
                const { data: { text } } = await worker.recognize('./images/demo4.png');
                console.log(text);
                document.getElementById('log').innerHTML = text;
                await worker.terminate();
            }
        }

        demo2();
    </script>
</body>
</html>

识别结果：
在这里插入图片描述
很拉跨，基本没识别出来。。。

示例五

demo5.png
在这里插入图片描述
试试识别身份证，这么大的字，这么清晰的像素
demo5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="log"></p>
    <!-- v4 -->
    <script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
    <script>
        const { createWorker } = Tesseract;


        async function demo2() {
            const worker = await createWorker({
                logger: m => console.log(m)
            });

            work();

            async function work() {
                await worker.loadLanguage('chi_sim');
                await worker.initialize('chi_sim');
                const { data: { text } } = await worker.recognize('./images/demo5.png');
                document.getElementById('log').innerHTML = text;
                await worker.terminate();
            }
        }

        demo2();
    </script>
</body>
</html>

识别结果：
在这里插入图片描述
识别出来了，但是会受到其他因素的干扰。

示例六

demo6.png
在这里插入图片描述
识别几个艺术字试试
demo6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="log"></p>
    <!-- v4 -->
    <script src='https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js'></script>
    <script>
        const { createWorker } = Tesseract;


        async function demo2() {
            const worker = await createWorker({
                logger: m => console.log(m)
            });

            work();

            async function work() {
                await worker.loadLanguage('chi_sim');
                await worker.initialize('chi_sim');
                const { data: { text } } = await worker.recognize('./images/demo6.png');
                document.getElementById('log').innerHTML = text;
                await worker.terminate();
            }
        }

        demo2();
    </script>
</body>
</html>

识别结果：
在这里插入图片描述
哎哟，不错哦，就是不那么完美，英文字母的拼写有一丢丢小问题。

实际开发中需要对使用过程进行优化，以及字库的训练。或者使用阿里或百度提供的付费版服务。

Tesseract.js:纯Javascript多语言OCR-开源
04-29
Tesseract.js是流行的Tesseract OCR引擎的纯Javascript端口。 Tesseract.js的库支持100多种语言，自动文本方向和脚本检测，用于读取段落，单词和字符边界框的简单界面。 Tesseract.js可以在具有NodeJS的浏览器和服务器上运行。 Tesseract.js是一个JavaScript库，可从图像中获取几乎所有口头语言的单词。 Tesseract.js的主要功能（例如，识别，检测）采用图像参数，该参数应该类似于图像。 根据是从浏览器运行还是通过NodeJS运行，所谓的“类似图像”有所不同。
tesseract-demo-script:Tesseract演示。 通过脚本标记包含了tesseract.js
05-02
tesseract-demo-script Tesseract演示。 Tesseract JS项目： : tesseract.js通过脚本标签包含。
OCR前端插件-----Tesseract.Js
liuhao9999的博客
06-14 3301
OCR前端插件-----Tesseract.Js
Tesseract.js 光学字符识别(OCR)实战指南
最新发布
gitblog_00990的博客
05-30 388
Tesseract.js 光学字符识别(OCR)实战指南 前言 Tesseract.js 是一个强大的 JavaScript OCR 库，它基于 Google 的 Tesseract OCR 引擎，能够在浏览器和 Node.js 环境中实现高质量的文本识别功能。本文将深入解析 Tesseract.js 的核心用法，帮助开发者快速掌握这一工具。 基础使用 最基本的 OCR 识别只需要几行代码： co...
【js】js识别图片中的文字插件 tesseract.js：
SunPeng的博客
01-09 4453
【js】js识别图片中的文字插件 tesseract.js：
前端小知识：第三方JS库：tesseract.js（基于浏览器性能的离线OCR）
weixin_39651356的博客
12-26 3192
前端小知识：第三方JS库：tesseract.js（基于浏览器性能的离线OCR）
Tesseract.js使用教程
qq_40210639的博客
11-13 3362
Tesseract.js使用教程。
tesseract.js-offline:离线使用tesseract.js的示例
05-11
Tesseract.js离线 该存储库是一个展示案例，展示了如何使用tesseract.js而不从远程下载任何文件。 安装 $ npm install 用法 浏览器 对于浏览器版本，请执行以下命令以启动服务器 $ npm run start 访问 ，然后按F12...
tesseract.js
11-06
Tesseract.js是一个开源的光学字符识别（OCR）引擎的纯JavaScript实现，可直接在浏览器或Node.js环境中运行。它允许开发者利用JavaScript进行文字识别，无需依赖其他语言或编译器。Tesseract.js支持多种语言，并且...
tesseract.js-master.zip
06-29
《Tesseract.js：一款强大的JavaScript版OCR库》 在当今数字化的世界中，光学字符识别（Optical Character Recognition，OCR）技术扮演着至关重要的角色，它能够将图像中的文本转换为可编辑、可搜索的数据。...
tesseract.js-electron:在电子中使用tesseract.js的示例
05-25
`tesseract.js`是一款强大的JavaScript封装版的Tesseract OCR（光学字符识别）引擎，能够识别图像中的文本，并将其转化为可编辑的数据。而Electron则是一个让开发者可以使用Web技术（如HTML、CSS和JavaScript）构建...
Tesseract.js (JavaScript OCR) 识别1D条形码下面的数字
01-06
在做条形码识别的时候，有可能碰到条形码因为被破坏，无法识别的情况。通常1D条形码的下面都印着对应的数字。这个时候还可以借助下OCR。虽然OCR的成功率可能不高，但是多一种识别方法也是好的。这里分享下如何用Tesseract.js来识别一张1D条形码。 如何使用Tesseract.js 使用npm的命令安装Tesseract.js: npm install tesseract.js 获取示例代码： https://github.com/naptha/tesseract.js/tree/master/examples 简单的运行下这些示例代码会发现第一次运行速度很慢，原因是需要下载语言包。要加快
tesseract.js：超过100种语言的纯Javascript OCR:open_book::party_popper::desktop_computer:
02-03
版本2现在可用，并且在master分支中正在开发中，请阅读有关v2的故事： 检查分支的版本1 Tesseract.js是一个JavaScript库，可从图像中获取单词。 （） 图像识别 视频实时识别 Tesseract.js包装了 引擎的。 它的工作原理在使用浏览器或纯脚本标记与与服务器上的。 ，使用起来很简单： import Tesseract from 'tesseract.js' ; Tesseract . recognize ( 'https://tesseract.projectnaptha.com/img/eng_bw.png' , 'eng' , { logger : m => console . log ( m ) } ) . then ( ( { data : { text } } ) => { console . log ( text ) ; } ) 或更需要 import { createWorker } from 'tesseract.js' ; const worker = createWorker ( { logger : m
Tesseractjs纯Javascript实现的OCR支持62种语言
08-08
Tesseract.js 纯Javascript实现的OCR支持62种语言，是流行Tesseract OCR引擎的一个JS移植
识别图片语言的JS库Tesseract.js.zip
07-19
Tesseract.js 一个几乎能识别出图片中所有语言的JS库。Tesseract.js使用脚本标签，webpack / browserify和节点，安装之后，进行如下操作：Tesseract.recognize(myImage)          .progress(function  (p) { console.log('progress', p)    })          .then(function (result) { console.log('result', result) })查看文档以了解API的完整处理。 标签：Tesseract
tesseract-js:一种在数据存储上执行复杂查询的超酷方法，来自 javascript
06-06
tesseract-js tesseract的节点模块
图片提取文字工具Tesseractjs
u014708123的博客
12-11 923
Tesseract.js 是一个基于 Tesseract OCR 引擎的开源 JavaScript 库，用于在浏览器和 Node.js 环境中执行光学字符识别 (OCR)。它的特点是无需依赖服务器端支持，完全在客户端执行 OCR 操作。跨平台支持：支持 100 多种语言的纯 JavaScript OCR 库;GitHub地址;
js利用tesseract进行图像识别(二） 数据解析
vegetable菜的博客
10-30 1722
http://icelily.xyz/?p=704
js识别图片中的文字插件 tesseract.js
bamboozjy的博客
08-23 2438
js识别图片中的文字插件 tesseract.js
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值