Question

<script type="text/javascript">

var video = document.getElementById('video');
var url1;

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        if( video.play())
        {
            Console.log("okokok");
        }
        else
        {
            Console.log("nonon");
        }
    });
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);


});


$(function () {
    var alr2=this.url1;
    var params = {
        // Request parameters
        "returnFaceId": "true",
        "returnFaceLandmarks": "false",
        "returnFaceAttributes": "age",
    };

    $.ajax({
        url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
        beforeSend: function(xhrObj){
            // Request headers
            xhrObj.setRequestHeader("Content-Type","application/json");
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","8b99a9ed839a40a08aa8b529ef0f9b8c");
        },
        type: "POST",
        // Request body
        data: '{ "url":  }'
    })
    .done(function(data) {
        alert("success");
        console.log(data[0].faceAttributes.age)

    })
    .fail(function() {
        alert("error");
    });
});

这是我的代码，在这张图片中是由画布绘制的，我想通过画布制作该图像的网址并将其传递给json对象，但请如何帮助我，我在这个问题中陷入困境，一个月在这里是行传递json对象中的url 类型：“POST”， //请求正文数据：'{“url”：}

Answer 1

您使用的API接受octet-stream次请求。所以去吧。
你只需要发布一个Blob，并从画布中获取这个Blob，你只需要使用toBlob方法，它可以是polyfiled（或专有的msToBlob）。

所以这会给你类似

的东西

function sendToMS(callback){
  canvas.toBlob(function(blob){
    var xhr = new XMLHttpRequest();
    xhr.onload = e=>callback(xhr.response);
    xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age');
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Ocp-Apim-Subscription-Key", YOUR_KEY);
xhr.send(blob);
  }, 'image/jpeg', .8);
}

其他无关但重要的说明：
如果您不撤消创建的blobURI，则不推荐使用URL.createObjectURL(MediaStream)并且有些危险：它会阻止硬件状态打开。
相反，应该使用MediaElement.srcObject = MediaStream。

作为完整的代码块：

function checkMyFace(){
const YOUR_KEY = prompt('please paste your key');
if(!YOUR_KEY){
  console.warn('you need a Microsoft Face API Key');
  return;
  }
function sendToMS(callback) {
  canvas.toBlob(function(blob) {
    var xhr = new XMLHttpRequest();
    xhr.onload = e => callback(xhr.response);
    xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age');
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Ocp-Apim-Subscription-Key", YOUR_KEY);
    xhr.send(blob);
  }, 'image/jpeg', .8);
}

navigator.mediaDevices.getUserMedia({
    video: true
  }).then(s => {
    vid.srcObject = s;
    return vid.play();
  })
  .then(_ => {
    canvas.width = vid.videoWidth;
    canvas.height = vid.videoHeight;
    canvas.getContext('2d').drawImage(vid, 0, 0);
    sendToMS(text => console.log(text));
  })
}
/* untested toBlob polyfill */
(function() {
  if (HTMLCanvasElement.prototype.toBlob) return;
  if (HTMLCanvasElement.prototype.msToBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function(cb, type, quality) {
        var c = this;
        setTimeout(function() {
          cb(c.msToBlob(type, quality));
        }, 0);
      }
    });
  } else {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function(cb, type, quality) {
        var c = this;
        setTimeout(function() {
          var binStr = atob(c.toDataURL(type, quality).split(',')[1]),
            len = binStr.length,
            arr = new Uint8Array(len);

          for (var i = 0; i < len; i++) {
            arr[i] = binStr.charCodeAt(i);
          }

          cb(new Blob([arr], {
            type: type || 'image/png'
          }));
        }, 0);
      }
    });
  }
})();

checkMyFace();

<video id="vid"></video>
<canvas id="canvas"></canvas>

并且比SO-snippets®fiddle for chrome更少保护。

如何将画布绘制的图像的url传递给json对象？

1 个答案: