LEADTOOLS HTML5
由于移动设备的处理能力和储存空间限制,在移动设备上执行光学字符识别(OCR)一直以来都是一项较大的挑战。随着LEADTOOLS HTML5的出现,在移动设备上执行光学字符识别(OCR)变成可能。凭借LEADTOOLS HTML5提供的HTML5查看器和RESTful Web服务,开发人员可以在任何桌面,平板电脑和移动设备上面创建难以置信的光学字符识别(OCR)应用程序。接下来,我们将展示如何在通过RESTful Web服务实现整页识别。
在无需下载大型的语言识别库和可执行文件的情况下,LEADTOOLS OCR RESTful Web服务提供了一项非常简便的方法将OCR识别添加到应用程序。通过简单的参数设置,并返回一个易于解析的带有文本的JSON结构。
通过查看器内置的rubber band事件,选择一块矩形区域。使用鼠标点击,并拖动鼠标,或者在触屏上滑动手指,用户可以在图像上选择一块矩形区域,然后处理事件,并将坐标传递到Web服务。一旦服务完成处理任务,接下来用户就可以使用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 servicevar 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 waitthis.beginOperation(); // build the service requestvar 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 imagerest += '&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 handlervar 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 requestrequest.onreadystatechange = readyStateChanged;request.open('GET', rest, true);request.send();},
运行上面的代码,你会发现如果没有矩形传递给识别功能,LEADTOOLS会创建一个完整的图像然后调用web服务。因此,你需要创建一个非常简单的按钮处理程序来完成整页识别。
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);