how to post image instead of URL in azure text recognition API using javascript?

Question

I am using this code https://learn.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/javascript#text-recognition-with-computer-vision-api-using-javascripta-namerecognizetext-a for text recognition. It takes URL as an input.

I wish to upload an image instead of giving URL.

Please help.

Answer 1

This works: https://jsfiddle.net/wx1zoej2/ (remember to sub in your API key and region).

You basically need to add an input of type file, read the array buffer of the FileReader that reacts when you select a file, and then submit the data using application/octet-stream as Content-Type.

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