使用LEADTOOLS HTML5实现零足迹OCR

LEADTOOLS 支持

0/5 (0投票)

2012 年 8 月 10 日

CPOL

5分钟阅读

43093

628

在移动设备上执行光学字符识别 (OCR) 一直是一个挑战，因为处理能力和存储空间非常有限。LEADTOOLS 凭借其 HTML5 / JavaScript 图像查看器控件和 RESTful Web 服务正在改变游戏规则。

下载演示 - 2.7 KB

引言

LEADTOOLS 长期以来一直提供屡获殊荣的 OCR 工具包。凭借其新的 HTML5 查看器和 RESTful Web 服务，您可以创建一个令人难以置信的识别应用程序，该应用程序可以在任何桌面、平板电脑或移动设备上运行。开发人员现在可以享受强大的桌面应用程序的所有优势，而不是为了在移动设备上正常运行而牺牲速度和功能。由于该应用程序本质上是跨平台的，程序员可以节省无数小时的测试小怪癖的时间和精力，并且在更新和维护应用程序时将拥有更大的安心。

LEADTOOLS SDK 中的关键 HTML5 和 OCR 功能

用于跨平台图像查看的 HTML5 / JavaScript 查看器控件
适用于支持 HTML5 的任何桌面、平板电脑或移动设备浏览器
支持鼠标和多点触控（手势）输入
交互模式包括

平移
Scale
缩放到矩形
以某点为中心
放大镜
捏合缩放
选框

根据物理和逻辑单位显示图像
内置图像处理，用于

旋转
Flip
调整大小/缩放

原生 HTML5 图像注释和标记
包含源代码，便于自定义和品牌化
通过 LEADTOOLS RESTful Web 服务进行扩展，添加高级功能，例如扩展文件格式支持（例如 TIFF、PDF、DOC、DICOM 等）、OCR 和条形码
用于桌面应用程序或高性能服务器环境的快速、准确、多线程 OCR 引擎
整页和区域 OCR
广泛的语言和字符集支持，包括拉丁语、西里尔语、东亚语和阿拉伯语
强大的文档图像清理和预处理功能
从任何彩色、灰度或黑白图像中提取文本
使用 LEADTOOLS Cloud SDK 轻松创建灵活、强大且高效的分布式 OCR 应用程序

包含 HTML5 和 OCR 技术的 SDK 产品

HTML5 / JavaScript 查看器控件

此示例基于我们第一个 HTML5 查看器文章中的示例，并展示了如何调用 OCR RESTful Web 服务。查看器的所有代码都包含在附加的示例中，并且功能齐全，但如果您想更详细地了解这些组件，请查看我们的第一篇文章。

OCR RESTful Web 服务

LEADTOOLS OCR RESTful Web 服务是一种将 OCR 功能添加到任何应用程序的简单方法，无需下载大型语言识别库和可执行文件。它接受一组简单的参数（源图像和识别区域），并返回一个易于解析的 JSON 结构，其中包含结果文本。

在此演示中，我们展示了如何使用 Web 服务执行两种类型的识别：区域识别和整页识别。第一种是通过查看器内置的选框事件选择一个小区域或区域来实现的。通过鼠标单击和拖动或触摸屏手指滑动，用户可以在图像上选择一个矩形，处理该事件，然后将这些坐标传递给 Web 服务。

一旦服务处理完成（由 onReadyStateChanged 事件指示），您就可以使用 JSON 解析响应，并根据您的应用程序需求显示或使用识别出的文本。对于本示例，我们仅在警报框中显示文本。

_selectRecognizeArea_RubberBandCompleted$1: function HTML5DemosLibrary__ocrDemo$_selectRecognizeArea_RubberBandCompleted$1(sender, e) {
   // Get the selected area and use that as a zone for the OCR service
   var searchArea = Leadtools.LeadRectD.fromLTRB(e.get_point1().get_x(), e.get_point1().get_y(), e.get_point2().get_x(), e.get_point2().get_y());
   var visibleRect = _viewer.imageControlRectangle(true);
   searchArea.intersect(visibleRect);
   searchArea = _viewer.convertRect(Leadtools.Controls.CoordinateType.control, Leadtools.Controls.CoordinateType.image, searchArea);
   if (searchArea.get_width() > 3 && searchArea.get_height() > 3) {
      this._recognize$1(searchArea);
   }
},
 
_recognize$1: function HTML5DemosLibrary__ocrDemo$_recognize$1(searchArea) {
   // display the loading gif while we wait
   this.beginOperation();
   
   // build the service request
   var rest = this.buildServiceUrl('ocr.svc');
   rest += '/GetText?uri=';
   rest += _viewer.get_imageUrl();
   var imageSize = _viewer.get_imageSize();
   rest += '&width=';
   rest += parseInt(imageSize.get_width());
   rest += '&height=';
   rest += parseInt(imageSize.get_height());
   if (!searchArea.get_isEmpty()) {
      // no selection was made, recognize the whole image
      rest += '&left=';
      rest += parseInt(searchArea.get_left());
      rest += '&top=';
      rest += parseInt(searchArea.get_top());
      rest += '&right=';
      rest += parseInt(searchArea.get_right());
      rest += '&bottom=';
      rest += parseInt(searchArea.get_bottom());
   }
   
   // create the request and event handler
   var request = new XMLHttpRequest();
   var _this = this;              
   var readyStateChanged = function() {
      if (request.readyState === 4) {
         if (request.status === 200) {
            var results = null;
            if (request.responseText != null && request.responseText.length > 0) {
               results = JSON.parse(request.responseText);
            }
            else {
               alert('No text was found in the specified area, please select another area that contains text and try again.');
            }
            request.onreadystatechange = null;
            request = null;
            _this.endOperation(false);
            if (results != null) {
               alert (results);
            }
         }
         else {
            _this.showRequestError(request);
         }
      }
   };
   
   // send the request
   request.onreadystatechange = readyStateChanged;
   request.open('GET', rest, true);
   request.send();
},

您可能已经注意到，如果未将矩形传递给 recognize 函数，它将为整个图像创建一个矩形，然后调用 Web 服务。因此，程序员需要做的就是创建一个非常简单的按钮处理程序来完成整页 OCR。

var recognizeButton = document.getElementById('recognizeButton');
recognizeButton.addEventListener('click', function(e) {
   // recognize the entire image by sending an empty zone
   _this._recognize$1(Leadtools.LeadRectD.get_empty());
}, false);

结论

LEADTOOLS 以易于使用的、高级的编程接口为开发人员提供了世界上性能最佳、最稳定的成像库，从而能够快速开发关键业务应用程序。

HTML5 和 OCR RESTful Web 服务只是 LEADTOOLS 提供的众多技术中的一部分。有关我们其他产品的更多信息，请务必访问我们的主页，下载免费的完整评估 SDK，并在评估期间利用我们的免费技术支持。

下载完整的 HTML5 示例

您可以下载一个功能齐全的演示，其中包括上面讨论的功能。要运行此示例，您需要以下内容

LEADTOOLS V17.5（免费 60 天评估）
运行配置实用程序（C:\LEADTOOLS 17.5\Shortcuts\HTML5\01 Document\01 Local Demos\07 Run This First To Configure Demos and Services）为 HTML5 演示和 RESTful Web 服务创建虚拟目录
将 LEADTOOLSHTML5RESTDemo.htm 复制到 C:\LEADTOOLS 17.5\Examples\JS\HTML5Demos（这是 https:///LEADTOOLSHTML5Demos 指向的位置）
如果加载托管在 IIS 中的图像，请确保为要支持的每种格式添加 MIME 类型（例如 .j2k = image/jpeg-2000，.dcm = image/dicom 等）
LEADTOOLS 还附带了一个功能更齐全的 HTML5 / JavaScript OCR 演示，其中包含其他工具，例如图像处理、交互模式和更详细的事件处理。

支持

需要帮助设置和运行此示例？请联系我们的支持团队获取免费技术支持！有关定价或许可问题，您可以联系我们的销售团队（sales@leadtools.com）或致电 704-332-5532。