wie man Bild anstelle von URL in azurblauer Texterkennungs-API unter Verwendung von Javascript bekannt gibt?

Question

Ich verwende diesen Code https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/javascript#text-recognition-with-computer-vision-api-using-javascripta-namerecognizetext-a für Texterkennung. Es nimmt URL als eine Eingabe.

Ich möchte ein Bild hochladen, anstatt URL zu geben.

Bitte helfen.

Answer 1

Dies funktioniert: https://jsfiddle.net/wx1zoej2/ (Denken Sie daran, Sub in Ihrem API-Schlüssel und Region).

Sie benötigen grundsätzlich einen Eingang vom Typ file, lesen Sie den Array-Puffer der FileReader hinzuzufügen, die reagieren, wenn Sie eine Datei auswählen, und dann die Daten einreichen application/octet-stream als Content-Type verwenden.

HTML:

<h1>Read handwritten image image:</h1> 
Image to read: 
<input type="file" id="inputImage" /> 
<br> 
<br> 
<div id="wrapper" style="width:1020px; display:table;"> 
    <div id="jsonOutput" style="width:600px; display:table-cell;"> 
    Response: 
    <br> 
    <br> 
    <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea> 
    </div> 
</div> 

JavaScript (mit jQuery):

document.querySelector('#inputImage').addEventListener('change', function() { 

    var reader = new FileReader(); 
    reader.onload = function() { 

    var arrayBuffer = this.result, 
     array = new Uint8Array(arrayBuffer); 

    // Replace the subscriptionKey string value with your valid subscription key. 
    var subscriptionKey = "YOUR-KEY-HERE"; 
    var uriBase = "https://YOUR-LOCATION-HERE.api.cognitive.microsoft.com/vision/v1.0/RecognizeText"; 

    var params = { 
     "handwriting": "true", 
    }; 
    $.ajax({ 
     url: uriBase + "?" + $.param(params), 

     beforeSend: function(jqXHR) { 
     jqXHR.setRequestHeader("Content-Type", "application/octet-stream"); 
     jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); 
     }, 

     type: "POST", 
     processData: false, 
     data: arrayBuffer 
    }) 

    .done(function(data, textStatus, jqXHR) { 
     // Show progress. 
     $("#responseTextArea").val("Handwritten text submitted. Waiting 10 seconds to retrieve the recognized text."); 
     setTimeout(function() { 
     // The "Operation-Location" in the response contains the URI to retrieve the recognized text. 
     var operationLocation = jqXHR.getResponseHeader("Operation-Location"); 

     $.ajax({ 
      url: operationLocation, 
      beforeSend: function(jqXHR) { 
      jqXHR.setRequestHeader("Content-Type", "application/json"); 
      jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); 
      }, 
      type: "GET", 
     }) 

     .done(function(data) { 
      // Show formatted JSON on webpage. 
      $("#responseTextArea").val(JSON.stringify(data, null, 2)); 
     }) 

     .fail(function(jqXHR, textStatus, errorThrown) { 
      // Display error message. 
      var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): "; 
      errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ? 
      jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message; 
      alert(errorString); 
     }); 
     }, 10000); 
    }) 

    .fail(function(jqXHR, textStatus, errorThrown) { 
     // Put the JSON description into the text area. 
     $("#responseTextArea").val(JSON.stringify(jqXHR, null, 2)); 

     // Display error message. 
     var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): "; 
     errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ? 
     jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message; 
     alert(errorString); 
    }) 
    } 
    reader.readAsArrayBuffer(this.files[0]); 

}, false);