javascript - 如何使用 javascript 在 azure 文本识别 API 中发布图像而不是 URL？

Question

我正在使用此代码https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/javascript#text-recognition-with-computer-vision-api-using-javascripta-namerecognizetext -a用于文本识别。它将 URL 作为输入。

我希望上传图片而不是提供 URL。

请帮忙。

Answer 1

这有效：https ://jsfiddle.net/wx1zoej2/ （请记住在您的 API 密钥和区域中分）。

您基本上需要添加 type 的输入file，读取FileReader选择文件时做出反应的数组缓冲区，然后使用application/octet-streamas提交数据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（使用 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);