将网络摄像头中的图像发布到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

回答

相关问题