HOW TO extract printed text (OCR) using the Azure Computer Vision REST API & JavaScript
The Azure documentation provides an excellent Quickstart example to extract printed text with optical character recognition (OCR) from an image by using Computer Vision's REST API which is part of Cognitive Services. Unlike in the Computer Vision API home page demo, the code sample just shows the raw JSON & not the extracted text in a readable format in the Preview tab
I adapted the code sample from Computer Vision API documentation to show extracted text -
The OCR results are more accurate in the Computer Vision API home page demo than that returned using v2.0 of the Computer Vision's REST API as the former uses the Recognize Text interface while latter uses OCR operation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>OCR Sample</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| function processImage() { | |
| // ********************************************** | |
| // *** Update or verify the following values. *** | |
| // ********************************************** | |
| // Replace <Subscription Key> with your valid subscription key. | |
| var subscriptionKey = "<Subscription Key>"; | |
| // You must use the same Azure region in your REST API method as you used to | |
| // get your subscription keys. For example, if you got your subscription keys | |
| // from the West US region, replace "westcentralus" in the URL | |
| // below with "westus". | |
| // | |
| // Free trial subscription keys are generated in the "westus" region. | |
| // If you use a free trial subscription key, you shouldn't need to change | |
| // this region. | |
| var uriBase = | |
| "https://eastus2.api.cognitive.microsoft.com/vision/v2.0/ocr"; | |
| // Request parameters. | |
| var params = { | |
| "language": "unk", | |
| "detectOrientation": "true", | |
| }; | |
| // Display the image. | |
| var sourceImageUrl = document.getElementById("inputImage").value; | |
| document.querySelector("#sourceImage").src = sourceImageUrl; | |
| // Perform the REST API call. | |
| $.ajax({ | |
| url: uriBase + "?" + $.param(params), | |
| // Request headers. | |
| beforeSend: function(jqXHR){ | |
| jqXHR.setRequestHeader("Content-Type","application/json"); | |
| jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); | |
| }, | |
| type: "POST", | |
| // Request body. | |
| data: '{"url": ' + '"' + sourceImageUrl + '"}', | |
| }) | |
| .done(function(data) { | |
| // Show formatted JSON on webpage. | |
| // $("#responseTextArea").val(JSON.stringify(data, null, 2)); | |
| var itext = "", regionCount, linesCount; | |
| regionCount = Object.keys(data.regions).length; | |
| for (r = 0; r < regionCount; r++) | |
| { | |
| var linesCount = Object.keys(data.regions[r].lines).length; | |
| for (i = 0; i < linesCount; i++) | |
| { | |
| var wordsCount = data.regions[r].lines[i].words.length; | |
| for (j = 0; j < wordsCount; j++) | |
| { | |
| itext += data.regions[r].lines[i].words[j].text + " "; | |
| } | |
| itext += "\n"; | |
| } | |
| } | |
| $("#responseTextArea").val(itext); | |
| }) | |
| .fail(function(jqXHR, textStatus, errorThrown) { | |
| // Display error message. | |
| var errorString = (errorThrown === "") ? | |
| "Error. " : errorThrown + " (" + jqXHR.status + "): "; | |
| errorString += (jqXHR.responseText === "") ? "" : | |
| (jQuery.parseJSON(jqXHR.responseText).message) ? | |
| jQuery.parseJSON(jqXHR.responseText).message : | |
| jQuery.parseJSON(jqXHR.responseText).error.message; | |
| alert(errorString); | |
| }); | |
| }; | |
| </script> | |
| <h1>Optical Character Recognition (OCR):</h1> | |
| Enter the URL to an image of printed text, then | |
| click the <strong>Read image</strong> button. | |
| <br><br> | |
| Image to read: | |
| <input type="text" name="inputImage" id="inputImage" | |
| value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Atomist_quote_from_Democritus.png/338px-Atomist_quote_from_Democritus.png" /> | |
| <button onclick="processImage()">Read image</button> | |
| <br><br> | |
| <div id="wrapper" style="width:1020px; display:table;"> | |
| <div id="jsonOutput" style="width:600px; display:table-cell;"> | |
| Response: | |
| <br><br> | |
| <textarea id="responseTextArea" class="UIInput" | |
| style="width:580px; height:400px;"></textarea> | |
| </div> | |
| <div id="imageDiv" style="width:420px; display:table-cell;"> | |
| Source image: | |
| <br><br> | |
| <img id="sourceImage" width="400" /> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Comments
Post a Comment