자바 스크립트를 사용하여 하늘색 텍스트 인식 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 키와 영역의 하위 키를 기억하십시오).

당신은 기본적으로 Content-Type로 application/octet-stream를 사용하여 데이터를 입력 file의 입력을 추가하면 파일을 선택할 때 반응하는 FileReader의 배열 버퍼를 읽은 다음 제출해야합니다.

HTML : (jQuery로)

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

자바 스크립트 :

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