Snabbstart: Identifiera digital pennanteckning med REST-API:et för inkigenkänning och JavaScript

Artikel
08/24/2020

Anteckning

INK Recognizer-API:et har avslutat förhandsversionen den 26 augusti 2020. Om du har befintliga ink recognizer-resurser kan du fortsätta använda dem tills tjänsten har dragits tillbaka helt den 31 januari 2021.

Använd den här snabbstarten för att börja använda API:et för inkigenkänning på digitala pennstreck. Det här JavaScript-programmet skickar en API-begäran som innehåller JSON-formaterade pennstrecksdata och visar svaret.

Det här programmet är skrivet i Javascript och körs i webbläsaren, men API:et är en RESTful-webbtjänst som är kompatibel med de flesta programmeringsspråk.

Vanligtvis anropar du API:et från en digital pennanteckningsapp. Den här snabbstarten skickar pennstrecksdata för följande handskrivna exempel från en JSON-fil.

en bild av handskriven text

Källkoden för den här snabbstarten finns på GitHub.

Förutsättningar

En webbläsare
Exempeldata för pennstreck för den här snabbstarten finns på GitHub.

Skapa en inkigenkänningsresurs

Anteckning

Slutpunkter för resurser som skapats efter den 1 juli 2019 använder det anpassade underdomänformatet som visas nedan. Mer information och en fullständig lista över regionala slutpunkter finns i Anpassade underdomännamn för Cognitive Services.

Azure Cognitive Services representeras av Azure-resurser som du prenumererar på. Skapa en resurs för inkigenkänning med hjälp av Azure Portal.

När du har skapat en resurs hämtar du slutpunkten och nyckeln genom att öppna resursen på Azure Portal och klicka på Snabbstart.

Skapa två miljövariabler:

INK_RECOGNITION_SUBSCRIPTION_KEY – Prenumerationsnyckeln för att autentisera dina begäranden.
INK_RECOGNITION_ENDPOINT – Slutpunkten för resursen. Resultatet ser ut så här:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Skapa ett nytt program

Skapa en ny .html fil i din favorit-IDE eller redigerare. Lägg sedan till grundläggande HTML för koden som vi lägger till senare.

<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>

Lägg till följande html i taggen <body> :

Två textområden för att visa JSON-begäran och -svaret.
En knapp för att anropa funktionen recognizeInk() som ska skapas senare.

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

Läs in JSON-exempeldata

I taggen <script> skapar du en variabel för sampleJson. Skapa sedan en JavaScript-funktion med namnet openFile() som öppnar en utforskare så att du kan välja din JSON-fil. Recognize ink När knappen klickas anropas den här funktionen och filen börjar läsas.

Använd ett FileReader objekts onload() funktion för att bearbeta filen asynkront.

Ersätt alla \n eller \r tecken i filen med en tom sträng.
Använd JSON.parse() för att konvertera texten till giltig JSON
request Uppdatera textrutan i programmet. Använd JSON.stringify() för att formatera JSON-strängen.

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

Skicka en begäran till API:et för pennanteckningsigenkänning

I taggen <script> skapar du en funktion med namnet recognizeInk(). Den här funktionen anropar senare API:et och uppdaterar sidan med svaret. Lägg till koden från följande steg i den här funktionen.

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

Skapa variabler för din slutpunkts-URL, prenumerationsnyckel och JSON-exempel. Skapa sedan ett XMLHttpRequest objekt för att skicka API-begäran.

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

Skapa returfunktionen för XMLHttpRequest objektet. Den här funktionen parsar API-svaret från en lyckad begäran och visar det i programmet.

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

Skapa felfunktionen för begärandeobjektet. Den här funktionen loggar felet till konsolen.

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

Skapa en funktion för begärandeobjektets onreadystatechange egenskap. När begärandeobjektets beredskapstillstånd ändras tillämpas ovanstående retur- och felfunktioner.

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

Skicka API-begäran. Lägg till din prenumerationsnyckel i Ocp-Apim-Subscription-Key rubriken och ange content-type till 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));
};

Kör programmet och visa svaret

Det här programmet kan köras i webbläsaren. Ett lyckat svar returneras i JSON-format. Du hittar även JSON-svaret på GitHub:

Nästa steg

Referens för REST-API

Om du vill se hur API:et för pennanteckning fungerar i en digital pennanteckningsapp kan du ta en titt på följande exempelprogram på GitHub:

Dela via