Microsoft인지 서비스 : 이미지 업로드

Question

모바일 장치에서 Microsoft Computer Vision API로 이미지를 업로드하려고하는데 잘못된 파일 형식에 대한 잘못된 요청 인 "입력 데이터가 유효한 이미지가 아닙니다."가 지속적으로 나타납니다. (

[이진 화상 데이터]

내가 base64 인코딩 측면에서 화상의 데이터를 가지고 문서는 I는 다음과 같은 형태의 프로그램/진수 스트림으로 데이터를 전송할 수 있다고 "/ 9j/4AAQSkZJ .........."), 또한 이미지를 FILE_URI로 가지고 있지만 데이터를 보낼 형식을 파악할 수 없습니다. + base64image; "베이스 64 화상/JPEG 데이터"

$(function() { 
    $.ajax({ 
     url: "https://api.projectoxford.ai/vision/v1.0/describe", 
     beforeSend: function (xhrObj) { 
      // Request headers 
      xhrObj.setRequestHeader("Content-Type", "application/octet-stream"); 
      xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", computerVisionKey); 
     }, 
     type: "POST", 
     // Request body 
     data: base64image, 
     processData: false   
    }) 
    .done(function(data) { 
     alert("success"); 
    }) 
    .fail(function(error) { 
     alert("fail"); 
    }); 
}); 

I는 다음 시도했다 :

• [base64image]
• 을 {base64image}
• 다음 샘플 코드는
• "이미지/JPEG,베이스 64,"+ base64image

등.

나는 이것을 Computer Vision API 콘솔에서 테스트했습니다. base64로 인코딩 된 바이너리가 허용되는 형식이 아니기 때문입니까? 아니면 잘못된 형식으로 완전히 보내고 있습니까?

참고 :이 작업은 URL을 application/json으로 보낼 때 작동합니다.

Answer 1

Emotion API Project Oxford base64 image을 보거나 코드 스 니펫 How to post an image in base64 encoding via .ajax?로 바로 이동하십시오.

되풀이되는 주제이기 때문에 API가 데이터 URI를 직접 처리하도록 기능 요청을했습니다 (UserVoice).

Answer 2

다른 사용자에게 도움이 될 수 있도록이 내용을 추가하고 싶습니다. 위의 cthrash가 참조하는 대답은 정상적으로 작동하지만 이미지를 base64로 변환하지 않고 다시 바이너리로 변환하는 간단한 방법으로 안내합니다.

이미지를 ArrayBuffer로 읽고이를 사용하여 게시물 본문에 대한 새로운 Blob을 구성하십시오. 또한 processData를 false로 설정하는 것을 잊지 마십시오. 전체 솔루션은 다음과 같습니다.

//onChange event handler for file input 
function fileInputOnChange(evt) { 
    var imageFile = evt.target.files[0];  
    var reader = new FileReader(); 
    var fileType; 

    //wire up the listener for the async 'loadend' event 
    reader.addEventListener('loadend', function() { 

     //get the result of the async readAsArrayBuffer call 
     var fileContentArrayBuffer = reader.result; 

      //now that we've read the file, make the ajax call 
      $.ajax({ 
       url: "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect", 
       beforeSend: function (xhrObj) { 
        // Request headers 
        xhrObj.setRequestHeader("Content-Type", "application/octet-stream"); 
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "<your subscription key goes here>"); 
       }, 
       type: "POST", 

       //don't forget this! 
       processData: false, 

       //NOTE: the fileContentArrayBuffer is the single element 
       //IN AN ARRAY passed to the constructor! 
       data: new Blob([fileContentArrayBuffer], { type: fileType }) 
      }) 
      .done(function (data) { 
       console.log(data) 
      }) 
      .fail(function (err) { 
       console.log(err) 
      }); 

    }); 
    if (imageFile) { 
     //save the mime type of the file 
     fileType = imageFile.type; 

     //read the file asynchronously 
     reader.readAsArrayBuffer(imageFile); 
    }  
}