快速入門：使用筆跡辨識器 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 上找到。

必要條件

網頁瀏覽器
此快速入門的範例筆跡筆觸資料可以在 GitHub 上找到。

建立筆跡辨識器資源

注意

在 2019 年 7 月 1 日之後建立的資源端點使用下面顯示的自訂子網域格式。如需詳細資訊和完整的區域端點清單，請參閱認知服務的自訂子網域名稱。

Azure 認知服務會由您訂閱的 Azure 資源呈現。使用 Azure 入口網站為筆跡辨識器建立資源。

建立資源之後，請透過在 Azure 入口網站上開啟您的資源並按一下 [快速入門]，以取得您的端點與金鑰。

建立兩個環境變數：

INK_RECOGNITION_SUBSCRIPTION_KEY - 用於驗證您要求的訂用帳戶金鑰。
INK_RECOGNITION_ENDPOINT - 您資源的端點。它看起來像下面這樣：
https://<your-custom-subdomain>.api.cognitive.microsoft.com

建立新的應用程式

在您最愛的整合式開發環境或編輯器中，建立新的 .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 上的下列應用程式範例：

共用方式為