javascript - 如何将canvas绘制的图像的url传递给json对象？

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

这是我的代码，在这张图片中是由 Canvas 绘制的，我想通过 Canvas 制作该图像的 url 并将其传递给 json 对象，但是请如何帮助我，我陷入这个问题一个月了，这是行在 json 对象中传递 url 类型:“帖子”， //请求体 数据:'{“url”:}

Answer 1

您使用的 API 接受 octet-stream 请求。所以就努力吧。
您只需发布一个 Blob，并从 Canvas 中获取此 Blob，您只需使用 toBlob 方法，该方法可以是多文件(或专有的 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);
}

<小时/>

其他不相关但重要的说明:
URL.createObjectURL(MediaStream) 已被弃用，如果您不撤销创建的 blobURI，它会在某种程度上产生危险:它将阻止硬件状态打开。
相反，应该使用 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 .