how to pass url of the image drawn by the canvass to json object?

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

here is my code and in this image is drawn by the canvass and i want to make url of that image by canvass and pass it to the json object but how please help me i am stuck in this problem with one month here is the line where pass the url in json object type: "POST", // Request body data: '{ "url": }

Hide your API key! It's personnal! So first go to your MS account and reset this key. — Kaiido
– Kaiido, Commented Apr 10, 2017 at 23:30

Kaiido · Accepted Answer · 2017-04-11 05:24:21Z

The API you are using accepts octet-stream requests. So go for it.
You just have to post a Blob, and to get this Blob from a canvas, you just have to use the toBlob method, which can be polyfiled (or proprietary msToBlob).

So this would give you something like

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

Other unrelated but important note:
URL.createObjectURL(MediaStream) is deprecated and somehow dangerous if you don't revoke the blobURI created : it will block the hardware state to open.
Instead, one should use MediaElement.srcObject = MediaStream.

As a complete code block :

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>

And in a less protective than SO-snippets® fiddle for chrome.

Collectives™ on Stack Overflow

how to pass url of the image drawn by the canvass to json object?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related