OCR識別控件LEADTOOLS HTML5應用：整頁OCR識別

因爲移動設備的處理能力和儲存空間限制，在移動設備上執行光學字符識別（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);