Rychlý start: Rozpoznávání digitálního rukopisu pomocí rozhraní REST API služby Rozpoznávání rukopisu a JavaScriptu

Článek
08/24/2020

Poznámka

Rozhraní API rozpoznávání rukopisu skončilo ve verzi Preview 26. srpna 2020. Pokud máte existující prostředky rozpoznávání rukopisu, můžete je dál používat, dokud se služba plně vyřadí z provozu 31. ledna 2021.

Pomocí tohoto rychlého startu začněte používat rozhraní API rozpoznávání rukopisu na digitálních tahech rukopisu. Tato aplikace JavaScriptu odešle požadavek rozhraní API obsahující data tahů rukopisu formátovanými json a zobrazí odpověď.

I když je tato aplikace napsaná v JavaScriptu a běží ve webovém prohlížeči, rozhraní API je webová služba RESTful kompatibilní s většinou programovacích jazyků.

Rozhraní API byste obvykle volali z digitální aplikace rukopisu. Tento rychlý start odešle data tahu rukopisu pro následující ručně psanou ukázku ze souboru JSON.

obrázek rukou psaného textu

Zdrojový kód pro tento rychlý start najdete na GitHubu.

Požadavky

Webový prohlížeč
Ukázková data tahu rukopisu pro tento rychlý start najdete na GitHubu.

Vytvoření prostředku rozpoznávání rukopisu

Poznámka

Koncové body pro prostředky vytvořené po 1. červenci 2019 používají vlastní poddoménový formát zobrazený níže. Další informace a úplný seznam regionálních koncových bodů najdete v tématu Vlastní názvy subdomén pro Cognitive Services.

Služby Azure Cognitive Services představují prostředky Azure, které si předplatíte. Vytvořte prostředek pro rozpoznávání rukopisu pomocí Azure Portal.

Po vytvoření prostředku získejte koncový bod a klíč otevřením prostředku na Azure Portal a kliknutím na Rychlý start.

Vytvořte dvě proměnné prostředí:

INK_RECOGNITION_SUBSCRIPTION_KEY – Klíč předplatného pro ověřování vašich požadavků.
INK_RECOGNITION_ENDPOINT – Koncový bod pro váš prostředek. Bude vypadat takto:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Vytvoření nové aplikace

Ve svém oblíbeném integrovaném vývojovém prostředí nebo editoru vytvořte nový .html soubor. Potom do něj přidejte základní kód HTML, který přidáme později.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

Do značky <body> přidejte následující kód HTML:

Dvě textové oblasti pro zobrazení požadavku a odpovědi JSON
Tlačítko pro volání recognizeInk() funkce, která se vytvoří později.

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

Načtení ukázkových dat JSON

V rámci značky <script> vytvořte proměnnou pro sampleJson. Pak vytvořte funkci JavaScriptu s názvem openFile() , která otevře průzkumníka souborů, abyste mohli vybrat soubor JSON. Recognize ink Po kliknutí na tlačítko se tato funkce zavolá a začne číst soubor.

FileReader K asynchronnímu zpracování souboru použijte funkci objektuonload().

\n Všechny nebo \r znaky v souboru nahraďte prázdným řetězcem.
Slouží JSON.parse() k převodu textu na platný JSON.
Aktualizujte request textové pole v aplikaci. Slouží JSON.stringify() k formátování řetězce 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]);
};

Odeslání požadavku do rozhraní API pro rozpoznávání rukopisu

V rámci značky <script> vytvořte funkci s názvem recognizeInk(). Tato funkce později zavolá rozhraní API a aktualizuje stránku s odpovědí. Do této funkce přidejte kód z následujících kroků.

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

Vytvořte proměnné pro adresu URL koncového bodu, klíč předplatného a ukázkový JSON. Pak vytvořte XMLHttpRequest objekt pro odeslání požadavku rozhraní 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();

Vytvořte návratové funkce objektu XMLHttpRequest . Tato funkce parsuje odpověď rozhraní API z úspěšného požadavku a zobrazí ji v aplikaci.

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

Vytvořte pro objekt požadavku chybovou funkci. Tato funkce zaznamená chybu do konzoly.

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

Vytvořte funkci pro vlastnost objektu onreadystatechange požadavku. Když se stav připravenosti objektu požadavku změní, použije se výše uvedené návratové a chybové funkce.

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

Odešlete požadavek rozhraní API. Přidání klíče předplatného Ocp-Apim-Subscription-Key do záhlaví a nastavení na content-typeapplication/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));
};

Spusťte aplikaci a zobrazte odpověď.

Tuto aplikaci můžete spustit ve webovém prohlížeči. Úspěšná odpověď se vrátí ve formátu JSON. Odpověď JSON najdete také na GitHubu:

Další kroky

REST API – referenční informace

Pokud chcete zjistit, jak rozhraní API pro rozpoznávání rukopisu funguje v digitální aplikaci rukopisu, podívejte se na následující ukázkové aplikace na GitHubu:

Sdílet prostřednictvím