Ocrad.js 图片文字识别插件教程:原理、使用与示例

作者:函数茶馆

时间:2026-10-22

浏览:619

本文介绍Ocrad.js,一个基于Emscripten转换的纯JavaScript OCR插件。相比GOCR.js,Ocrad.js作为直接端口,避免了重复初始化开销,处理速度显著提升。文章通过引入文件、调用全局OCRAD函数及完整Demo代码,演示如何在前端实现图片文字识别功能。

文章目录

Ocrad.js 简介与性能优势

Ocrad.js 是 Ocrad 项目的纯 JavaScript 移植版,通过 Emscripten 工具自动转换生成。它是一个轻量级的光学字符识别(OCR)工具,能够扫描图像并提取其中的文字内容转换为文本。

与 GOCR.js 不同,Ocrad.js 被设计为直接端口而非可执行文件的封装层。这种架构使得后续图像处理无需重新初始化可执行代码,从而将处理时间大幅缩短至 GOCR.js 的八分之一。

GOCR.js 已在 GitHub 开源,用户可通过相关链接获取资源。

Ocrad.js 的资源可在 CSDN 平台下载。

Ocrad.js 使用示例

接下来,我们将通过一个基础 Demo 来详细讲解 Ocrad.js 的具体用法。


<html>
 <head>
 <title>业余草:www.xttblog.com</title>
 <style>
 body {
 background: whiteSmoke;
 font-family: sans-serif;
 margin: 30px;
 }
 #transcription, #pic {
 background: white;
 display: inline-block;
 border: 1px solid #ddd;
 margin: 10px;
 }
 #transcription {
 font-size: 30px;
 padding: 30px;
 min-width: 300px;
 color: gray;
 }
 #transcription.done {
 color: black;
 }
 #main {
 display: flex;
 }
 </style>
 </head>
 <body>
 <h1>Simple Ocrad.js Example</h1>
 <script src="../../ocrad.js"></script>
 <script>
 function recognize_image(){
 document.getElementById('transcription').innerText = "(Recognizing...)"
 OCRAD(document.getElementById("pic"), function(text){
 document.getElementById('transcription').className = "done"
 document.getElementById('transcription').innerText = text;
 })
 }
 </script>
 <div id="main">
 <!-- CODE大全:www.codedq.net -->
 <img id="pic" src="img/message.png" onload="recognize_image()">
 <div id="transcription"></div>
 </div>
 </body> 
</html>

使用 Ocrad.js 非常简便,第一步是在项目中引入 ocrad.js 脚本文件。


<script src="ocrad.js"></script>

该库暴露了一个全局函数 ocrad,它接收图像作为参数,并返回识别出的文本字符串。


var string = OCRAD(image);
alert(string);

以上内容涵盖了 Ocrad.js 的核心使用方法,希望能为读者提供有价值的参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章