快速入门：使用墨迹识别器 REST API 和 JavaScript 识别数字墨迹

项目
08/24/2020

注意

墨迹识别器 API 已于 2020 年 8 月 26 日结束预览。如果你目前有墨迹识别器资源，可继续使用它们，直到该服务于 2021 年 1 月 31 日被完全停用为止。

根据本快速入门的说明，开始对数字墨迹笔划使用墨迹识别器 API。本 JavaScript 应用程序发送包含 JSON 格式墨迹笔划数据的 API 请求，并显示响应。

虽然此应用程序采用 JavaScript 编写且在 Web 浏览器中运行，但 API 是一种 RESTful Web 服务，可与大多数编程语言兼容。

通常会从数字墨迹应用调用此 API。本快速入门为 JSON 文件中的以下手写示例发送墨迹笔划数据。

手写文本图像

可以在 GitHub 上找到此快速入门的源代码。

先决条件

Web 浏览器
可以在 GitHub 上找到此快速入门的示例墨迹笔划数据。

创建“墨迹识别器”资源

注意

在 2019 年 7 月 1 日之后创建的资源的终结点使用如下所示的自定义子域格式。有关详细信息和区域终结点的完整列表，请参阅认知服务的自定义子域名。

Azure 认知服务由你订阅的 Azure 资源表示。使用 Azure 门户为墨迹识别器创建资源。

创建资源后，通过打开 Azure 门户上的资源并单击“快速入门”来获取终结点和密钥。

创建两个环境变量：

INK_RECOGNITION_SUBSCRIPTION_KEY - 用于对请求进行身份验证的订阅密钥。
INK_RECOGNITION_ENDPOINT - 资源的终结点。它将如下所示：
https://<your-custom-subdomain>.api.cognitive.microsoft.com

创建新应用程序

在最喜爱的 IDE 或编辑器中创建一个新的 .html 文件。然后，向该文件添加基本的 HTML（适用于我们稍后要添加的代码）。
```
<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        </script>
    </head>

    <body>
    </body>

</html>
```

在 <body> 标记中添加以下 html：

两个文本区域，用于显示 JSON 请求和响应。
一个按钮，用于调用稍后将创建的 recognizeInk() 函数。

<!-- <body>-->
    <h2>Send a request to the Ink Recognition API</h2>
    <p>Request:</p>
    <textarea id="request" style="width:800px;height:300px"></textarea>
    <p>Response:</p>
    <textarea id="response" style="width:800px;height:300px"></textarea>
    <br>
    <button type="button" onclick="recognizeInk()">Recognize Ink</button>
<!--</body>-->

加载示例 JSON 数据

在 <script> 标记中，为 sampleJson 创建一个变量。然后创建一个名为 openFile() 的 JavaScript 函数，用于打开文件资源管理器，这样你就可以选择 JSON 文件。单击 Recognize ink 按钮时，该按钮会调用此函数并开始读取该文件。

使用 FileReader 对象的 onload() 函数以异步方式处理文件。

将文件中的任何 \n 或 \r 字符替换为空字符串。
使用 JSON.parse() 将文本转换为有效的 JSON
更新应用程序中的 request 文本框。使用 JSON.stringify() 设置 JSON 字符串格式。

var sampleJson = "";
function openFile(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
        sampleJson = reader.result.replace(/(\\r\\n|\\n|\\r)/gm, "");
        sampleJson = JSON.parse(sampleJson);
        document.getElementById('request').innerHTML = JSON.stringify(sampleJson, null, 2);
    };
    reader.readAsText(input.files[0]);
};

将请求发送到墨迹识别器 API

在 <script> 标记中，创建名为 recognizeInk() 的函数。该函数稍后会调用 API 并使用响应来更新页面。在此函数中添加以下步骤中的代码。

function recognizeInk() {
// add the code from the below steps here 
}

为终结点 URL、订阅密钥和示例 JSON 创建变量。然后创建 XMLHttpRequest 对象，用于发送 API 请求。

// Replace the below URL with the correct one for your subscription. 
// Your endpoint can be found in the Azure portal. For example: "https://<your-custom-subdomain>.cognitiveservices.azure.com";
var SERVER_ADDRESS = process.env["INK_RECOGNITION_ENDPOINT"];
var ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize";
var SUBSCRIPTION_KEY = process.env["INK_RECOGNITION_SUBSCRIPTION_KEY"];
var xhttp = new XMLHttpRequest();

为 XMLHttpRequest 对象创建返回函数。此函数会分析来自成功请求的 API 响应，并将其显示在应用程序中。

function returnFunction(xhttp) {
    var response = JSON.parse(xhttp.responseText);
    console.log("Response: %s ", response);
    document.getElementById('response').innerHTML = JSON.stringify(response, null, 2);
}

为请求对象创建错误函数。此函数将错误记录到控制台。

function errorFunction() {
    console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText);
}

为请求对象的 onreadystatechange 属性创建函数。当请求对象的就绪状态更改时，将会应用上述返回函数和错误函数。

xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};

发送 API 请求。向 Ocp-Apim-Subscription-Key 标头添加订阅密钥，并将 content-type 设置为 application/json

xhttp.open("PUT", ENDPOINT_URL, true);
xhttp.setRequestHeader("Ocp-Apim-Subscription-Key", SUBSCRIPTION_KEY);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send(JSON.stringify(sampleJson));
};

运行应用程序并查看响应

此应用程序可在 Web 浏览器中运行。成功的响应以 JSON 格式返回。也可在 GitHub 上找到 JSON 响应：

后续步骤

REST API 参考

若要了解墨迹识别 API 在数字墨迹应用中的工作原理，请查看 GitHub 上的以下示例应用程序：

通过