將網絡攝像頭中的圖像發佈到Azure Face Api

我試圖將從攝像頭獲取的圖像上載到Microsoft Azure Face Api。我從canvas.toDataUrl（'image/png'）獲取包含Data Uri的圖像。我將內容類型更改爲應用程序/八位字節流，當我將Data Uri附加到發佈請求時，我收到一個錯誤的請求（400）無效的人臉圖像。如果我將附加數據更改爲Blob，我會停止接收錯誤，但是我只返回空數組而不是JSON對象。我真的很感謝任何幫助指引我朝着正確的方向。將網絡攝像頭中的圖像發佈到Azure Face Api

謝謝！

來源

2017-10-12 pengcheng95

「toDataUrl」的結果已經是有效的URL。嘗試使用'application/json'並將結果發送給'url'屬性 –

當我將附加的內容添加到toDataUrl並將Content-Type更改爲應用程序時，我得到一個JSON解析錯誤。 – pengcheng95

你需要發送json。 '{「url」：}' –

所以我通過發送圖像作爲一個blob對象得到了答案終於。您首先從帆布帶扶手的圖像：

let data = canvas.toDataURL('image/jpeg');

之後，可以將其重新格式化爲一個blob數據對象通過運行：

fetch(data) 
    .then(res => res.blob()) 
    .then(blobData => { 
    // attach blobData as the data for the post request 
    }

您還需要切換後的內容類型請求「應用程序/八位字節流」

來源

2017-10-25 19:27:32 pengcheng95

哦，你真幸運，我剛剛（成功！）在2天前嘗試過。

發送base64編碼的JPEG到Face API效率非常低，編碼輸出字節與輸入字節的比率爲4：3（開銷爲33％）。只需發送一個字節數組，它的工作原理，文檔mention it briefly。

並嘗試解讀爲JPEG不PNG，這只是浪費帶寬的網絡攝像頭的鏡頭。

... 

    var dataUri = canvas.toDataURL('image/' + format); 
    var data = dataUri.split(',')[1]; 
    var mimeType = dataUri.split(';')[0].slice(5) 

    var bytes = window.atob(data); 
    var buf = new ArrayBuffer(bytes.length); 
    var byteArr = new Uint8Array(buf); 

    for (var i = 0; i < bytes.length; i++) { 
     byteArr[i] = bytes.charCodeAt(i); 
    } 

    return byteArr;

現在在其他任何時髦的JS框架的人使用這些天使用byteArr爲您在$.ajax()的jQuery或iDontUnderStandHowWeGotHereAsAPeople()有效載荷（data:）。

做的反向時髦的辦法是：

var payload = byteArr; 

var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'https://SERVICE_URL'); 
xhr.setRequestHeader('Content-Type', 'application/octet-stream'); 
xhr.send(payload);

來源

2017-10-12 23:07:33 evilSnobu

謝謝你的評論關於JPEG！我試過你的解決方案，但是我得到一個400：無效的臉部圖像錯誤，當我張貼到微軟api。進入這個問題呢？ – pengcheng95

編號使用類似https://requestb.in或Fiddler的內容來查看您正在製作的原始請求。如果你現在確實發送JPEG，身體應該用「JFIF」字符串在前兩行的某個位置用肉眼看「二進制」。 – evilSnobu

類似這樣的 - https://requestb.in/13iujde1?inspect – evilSnobu

爲了延長Dalvor的回答是：這是AJAX調用，對我的作品：

fetch(data) 
.then(res => res.blob()) 
.then(blobData => { 
    $.post({ 
     url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect", 
     contentType: "application/octet-stream", 
     headers: { 
     'Ocp-Apim-Subscription-Key': '<YOUR-KEY-HERE>' 
     }, 
     processData: false, 
     data: blobData 
    }) 
    .done(function(data) { 
     $("#results").text(JSON.stringify(data)); 

    }) 
    .fail(function(err) { 
     $("#results").text(JSON.stringify(err)); 
    })

此處的完整演示代碼：https://jsfiddle.net/miparnisari/b1zzpvye/

來源

2017-10-29 19:45:49

將網絡攝像頭中的圖像發佈到Azure Face Api

回答

相關問題