由于移动设备的处理能力和储存空间限制，在移动设备上执行光学字符识别（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 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();
},

运行上面的代码，你会发现如果没有矩形传递给识别功能，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);