快速入门:使用计算机视觉 REST API 和 JavaScript 提取印刷体文本 (OCR)Quickstart: Extract printed text (OCR) using the Computer Vision REST API and JavaScript

在本快速入门中,你将使用计算机视觉的 REST API,通过光学字符识别 (OCR) 从图像中提取印刷体文本。In this quickstart, you extract printed text with optical character recognition (OCR) from an image by using Computer Vision's REST API. 借助 OCR 方法,可检测图像中的印刷体文本,并将识别的字符提取到计算机可用的字符流中。With the OCR method, you can detect printed text in an image and extract recognized characters into a machine-usable character stream.

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a Trial before you begin.

先决条件Prerequisites

必须具有计算机视觉的订阅密钥。You must have a subscription key for Computer Vision. 你可以按照创建认知服务帐户中的说明订阅计算机视觉并获取密钥。You can follow the instructions in Create a Cognitive Services account to subscribe to Computer Vision and get your key.

创建并运行示例Create and run the sample

要创建和运行示例,请执行以下步骤:To create and run the sample, do the following steps:

  1. 将以下代码复制到文本编辑器中。Copy the following code into a text editor.
  2. 必要时在代码中进行如下更改:Make the following changes in code where needed:
    1. subscriptionKey 的值替换为你的订阅密钥。Replace the value of subscriptionKey with your subscription key.
    2. 如有必要,请将 uriBase 的值替换为获取的订阅密钥所在的 Azure 区域中的 OCR 方法的终结点 URL。Replace the value of uriBase with the endpoint URL for the OCR method from the Azure region where you obtained your subscription keys, if necessary.
    3. (可选)将 inputImage 控件的 value 属性的值替换为要分析的其他图像的 URL。Optionally, replace the value of the value attribute for the inputImage control with the URL of a different image that you want to analyze.
  3. 将代码保存为以 .html 为扩展名的文件。Save the code as a file with an .html extension. 例如,get-printed-text.htmlFor example, get-printed-text.html.
  4. 打开一个浏览器窗口。Open a browser window.
  5. 在浏览器中,将文件拖放到浏览器窗口。In the browser, drag and drop the file into the browser window.
  6. 在浏览器中显示网页时,选择“读取图像”按钮 。When the webpage is displayed in the browser, choose the Read image button.
<!DOCTYPE html>
<html>
<head>
    <title>OCR Sample</title>
    <script src="https://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>";

        var uriBase =
            "https://api.cognitive.azure.cn/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));
        })

        .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>

检查响应Examine the response

成功的响应以 JSON 格式返回。A successful response is returned in JSON. 示例网页会在浏览器窗口中分析和显示成功响应,如下例所示:The sample webpage parses and displays a successful response in the browser window, similar to the following example:

{
  "language": "en",
  "orientation": "Up",
  "textAngle": 0,
  "regions": [
    {
      "boundingBox": "21,16,304,451",
      "lines": [
        {
          "boundingBox": "28,16,288,41",
          "words": [
            {
              "boundingBox": "28,16,288,41",
              "text": "NOTHING"
            }
          ]
        },
        {
          "boundingBox": "27,66,283,52",
          "words": [
            {
              "boundingBox": "27,66,283,52",
              "text": "EXISTS"
            }
          ]
        },
        {
          "boundingBox": "27,128,292,49",
          "words": [
            {
              "boundingBox": "27,128,292,49",
              "text": "EXCEPT"
            }
          ]
        },
        {
          "boundingBox": "24,188,292,54",
          "words": [
            {
              "boundingBox": "24,188,292,54",
              "text": "ATOMS"
            }
          ]
        },
        {
          "boundingBox": "22,253,297,32",
          "words": [
            {
              "boundingBox": "22,253,105,32",
              "text": "AND"
            },
            {
              "boundingBox": "144,253,175,32",
              "text": "EMPTY"
            }
          ]
        },
        {
          "boundingBox": "21,298,304,60",
          "words": [
            {
              "boundingBox": "21,298,304,60",
              "text": "SPACE."
            }
          ]
        },
        {
          "boundingBox": "26,387,294,37",
          "words": [
            {
              "boundingBox": "26,387,210,37",
              "text": "Everything"
            },
            {
              "boundingBox": "249,389,71,27",
              "text": "else"
            }
          ]
        },
        {
          "boundingBox": "127,431,198,36",
          "words": [
            {
              "boundingBox": "127,431,31,29",
              "text": "is"
            },
            {
              "boundingBox": "172,431,153,36",
              "text": "opinion."
            }
          ]
        }
      ]
    }
  ]
}

后续步骤Next steps

浏览一款 JavaScript 应用程序,该应用程序使用计算机视觉执行光学字符识别 (OCR)、创建智能裁剪缩略图,并对图像中的视觉特征(包括人脸)进行检测、分类、标记和描述。Explore a JavaScript application that uses Computer Vision to perform optical character recognition (OCR); create smart-cropped thumbnails; plus detect, categorize, tag, and describe visual features, including faces, in an image. 要快速体验计算机视觉 API,请尝试使用 Open API 测试控制台To rapidly experiment with the Computer Vision API, try the Open API testing console.