Rövid útmutató: Digitális festék felismerése az Ink Recognizer REST API és a JavaScript használatával

Cikk
08/24/2020

Megjegyzés

Az Ink Recognizer API előzetes verziója 2020. augusztus 26-án véget ért. Ha rendelkezik meglévő Ink Recognizer-erőforrásokkal, továbbra is használhatja őket, amíg a szolgáltatás 2021. január 31-én teljesen ki nem áll.

Ezzel a rövid útmutatóval megkezdheti az Ink Recognizer API használatát digitális tollvonásokon. Ez a JavaScript-alkalmazás egy JSON-formátumú tollvonás-adatokat tartalmazó API-kérést küld, és megjeleníti a választ.

Bár ez az alkalmazás JavaScript nyelven van megírva, és a webböngészőben fut, az API egy RESTful webszolgáltatás, amely kompatibilis a legtöbb programozási nyelvvel.

Általában egy digitális tintaalkalmazásból hívná meg az API-t. Ez a rövid útmutató kézírásos tollvonás-adatokat küld a következő kézzel írt mintához egy JSON-fájlból.

kézzel írt szöveg képe

A rövid útmutató forráskódja a GitHubon található.

Előfeltételek

Webböngésző
A rövid útmutatóhoz tartozó példa szabadkézi vonások adatai a GitHubon találhatók.

Ink Recognizer-erőforrás létrehozása

Megjegyzés

A 2019. július 1. után létrehozott erőforrások végpontjai az alább látható egyéni altartomány-formátumot használják. További információkért és a regionális végpontok teljes listájáért tekintse meg a Cognitive Services egyéni altartományneveit.

Az Azure Cognitive Servicest az Ön által előfizetett Azure-erőforrások képviselik. Hozzon létre egy erőforrást az Ink Recognizerhez a Azure Portal használatával.

Miután létrehozott egy erőforrást, szerezze be a végpontot és a kulcsot úgy, hogy megnyitja az erőforrást a Azure Portal, majd a Gyors üzembe helyezés gombra kattint.

Hozzon létre két környezeti változót:

INK_RECOGNITION_SUBSCRIPTION_KEY – A kérések hitelesítéséhez szükséges előfizetői azonosító.
INK_RECOGNITION_ENDPOINT – Az erőforrás végpontja. Ez így fog kinézni:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Új alkalmazás létrehozása

Hozzon létre egy új .html fájlt a kedvenc IDE-jében vagy szerkesztőjében. Ezután adjon hozzá alapszintű HTML-t a később hozzáadandó kódhoz.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

A címkén <body> belül adja hozzá a következő html-t:

Két szövegterület a JSON-kérés és a válasz megjelenítéséhez.
A függvény meghívására recognizeInk() szolgáló gomb, amely később jön létre.

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

A példa JSON-adatok betöltése

A címkén <script> belül hozzon létre egy változót a sampleJson számára. Ezután hozzon létre egy JavaScript-függvényt a fájlkezelő openFile() megnyitásához, hogy kiválaszthassa a JSON-fájlt. Amikor a Recognize ink gombra kattint, meghívja ezt a függvényt, és elkezdi olvasni a fájlt.

FileReader Egy objektum függvényével onload() aszinkron módon dolgozhatja fel a fájlt.

Cserélje le a fájlban lévő karaktereket \n\r vagy karaktereket egy üres sztringre.
A JSON.parse() szöveg átalakítása érvényes JSON-fájllá
Frissítse a request szövegmezőt az alkalmazásban. A JSON-sztring formázására használható JSON.stringify() .

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]);
};

Kérés küldése az Ink Recognizer API-nak

A címkén <script> belül hozzon létre egy .recognizeInk() Ez a függvény később meghívja az API-t, és frissíti az oldalt a válaszsal. Adja hozzá a függvény alábbi lépéseiből származó kódot.

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

Hozzon létre változókat a végpont URL-címéhez, az előfizetői azonosítóhoz és a minta JSON-hoz. Ezután hozzon létre egy XMLHttpRequest objektumot az API-kérés elküldéséhez.

// 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();

Hozza létre az objektum visszatérési függvényét XMLHttpRequest . Ez a függvény elemzi egy sikeres kérés API-válaszát, és megjeleníti azt az alkalmazásban.

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

Hozza létre a hibafüggvényt a kérelemobjektumhoz. Ez a függvény naplózza a hibát a konzolon.

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

Hozzon létre egy függvényt a kérelemobjektum tulajdonságához onreadystatechange . Amikor a kérelemobjektum készültségi állapota megváltozik, a rendszer a fenti visszatérési és hibafüggvényeket alkalmazza.
```
xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};
```

Küldje el az API-kérést. Adja hozzá az előfizetői azonosítót a Ocp-Apim-Subscription-Key fejléchez, és állítsa a következőre: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));
};

Futtassa az alkalmazást, és tekintse meg a választ

Ez az alkalmazás a webböngészőben futtatható. A rendszer JSON formátumban ad vissza egy sikeres választ. A JSON-választ a GitHubon is megtalálhatja:

Következő lépések

REST API-referencia

Ha szeretné megtekinteni, hogyan működik az Ink Recognition API egy digitális tintaalkalmazásban, tekintse meg a következő mintaalkalmazásokat a GitHubon:

Megosztás a következőn keresztül: