Avvio rapido: Riconoscere l'input penna con l'API REST Riconoscimento input penna e JavaScript

Articolo
08/24/2020

Nota

L'anteprima dell'API riconoscimento input penna è terminata il 26 agosto 2020. Se esistono risorse di riconoscimento input penna, è possibile continuare a usarle fino a quando il servizio non verrà ritirato completamente il 31 gennaio 2021.

Usare questa guida di avvio rapido per iniziare a usare l'API Riconoscimento input penna su tratti input penna. Questa applicazione JavaScript # invia una richiesta API contenenti i dati del tratto input penna in formato JSON e visualizza la risposta.

L'applicazione è scritta in JavaScript ed eseguita nel Web browser, ma l'API è un servizio Web RESTful compatibile con la maggior parte dei linguaggi di programmazione.

In genere è necessario chiamare l'API da un'app di input penna. Questa guida di avvio rapido invia i dati del tratto input penna per l'esempio scritto a mano seguente da un file JSON.

immagine di testo scritto a mano

Il codice sorgente per questo avvio rapido è disponibile su GitHub.

Prerequisiti

Un Web browser
I dati di esempio del tratto input penna per questo avvio rapido sono disponibili in GitHub.

Creare una risorsa di riconoscimento input penna

Nota

Gli endpoint per le risorse create dopo il 1° luglio 2019 usano il formato di sottodominio personalizzato riportato di seguito. Per altre informazioni e per un elenco completo degli endpoint a livello di area, vedere Nomi di sottodomini personalizzati per Servizi cognitivi.

I Servizi cognitivi di Azure sono rappresentati dalle risorse di Azure a cui si effettua la sottoscrizione. Creare una risorsa per il riconoscimento input penna usando il portale Azure.

Dopo aver creato una risorsa, ottenere l'endpoint e il codice aprendo la risorsa nel portale di Azure e facendo clic su Avvio rapido.

Creare due variabili di ambiente:

INK_RECOGNITION_SUBSCRIPTION_KEY: la chiave di sottoscrizione per l'autenticazione delle richieste.
INK_RECOGNITION_ENDPOINT: l'endpoint per la risorsa. L'aspetto sarà simile al seguente:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Creare una nuova applicazione

Nell'ambiente di sviluppo integrato o nell'editor preferito creare un nuovo file .html. Aggiungere il codice HTML di base per il codice che verrà aggiunto in un secondo momento.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

All'interno del tag <body> aggiungere il codice HTML seguente:

Due aree di testo per visualizzare la risposta e la richiesta JSON.
Un pulsante per chiamare la funzione recognizeInk() che verrà creato in un secondo momento.

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

Caricare i dati JSON di esempio

All'interno del tag <script>, creare una variabile per sampleJson. Creare quindi una funzione JavaScript denominata openFile() che apre una sessione di Esplora file per consentire la selezione del file JSON. Quando si fa clic sul pulsante Recognize ink, verrà chiamata questa funzione e inizierà la lettura del file.

Usare la funzione onload() di un oggetto FileReader per elaborare il file in modalità asincrona.

Sostituire tutti i caratteri \n o \r presenti nel file con una stringa vuota.
Usare JSON.parse() per convertire il testo in formato JSON valido
Aggiornare la casella di testo request nell'applicazione. Usare JSON.stringify() per formattare la stringa 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]);
};

Inviare una richiesta all'API Riconoscimento input penna

All'interno del tag <script> creare una funzione denominata recognizeInk(). Questa funzione chiamerà in un secondo momento l'API e aggiornerà la pagina con la risposta. Aggiungere il codice dai passaggi seguenti all'interno di questa funzione.

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

Creare le variabili per l'URL dell'endpoint, la chiave di sottoscrizione e il codice JSON di esempio. Creare quindi un oggetto XMLHttpRequest per inviare la richiesta 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();

Creare la funzione return per l'oggetto XMLHttpRequest. Questa funzione analizzerà la risposta API da una richiesta riuscita e la visualizzerà nell'applicazione.

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

Creare la funzione error per l'oggetto richiesta. Questa funzione registra l'errore nella console.

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

Creare una funzione per la proprietà onreadystatechange dell'oggetto richiesta. Quando lo stato di conformità dell'oggetto richiesta cambia, verranno applicate le funzioni return e error sopra descritte.

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

Inviare la richiesta API. Aggiungere la chiave di sottoscrizione all'intestazione Ocp-Apim-Subscription-Key e impostare content-type su 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));
};

Eseguire l'applicazione e visualizzare la risposta

Questa applicazione può essere eseguita all'interno del browser Web. Viene restituita una risposta con esito positivo in formato JSON. È anche possibile trovare la risposta JSON in GitHub:

Passaggi successivi

Informazioni di riferimento sulle API REST

Per vedere come funziona l'API Riconoscimento input penna in un'app di input penna, esaminare le applicazioni di esempio seguenti in GitHub: