如何将捕获的图像传递给ajax数据？

Question

<script>

/////////////////////////////////////////////////////////////////////////////////


    function makeblob(dataURL) {
        var BASE64_MARKER = ';base64,';
        if (dataURL.indexOf(BASE64_MARKER) == -1) {
            var parts = dataURL.split(',');
            var contentType = parts[0].split(':')[1];
            var raw = decodeURIComponent(parts[1]);
            return new Blob([raw], { type: contentType });
        }
        var parts = dataURL.split(BASE64_MARKER);
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }

        return new Blob([uInt8Array], { type: contentType });
    }
  function startCapture() {
    startPlaying( "webcam_preview" );
    setInterval( function()
    {
    var picture=takePicture( "webcam_preview", "img_snapshot" );
    //  sendrequest(picture);
    },
    4500 );
  }
                 function startPlaying( videoTagID ) {
                 if( !videoTagID || ( ( typeof videoTagID ) != 'string' ) )
                   return;

                 var video = document.getElementById( videoTagID );

                 navigator.getMedia = ( navigator.getUserMedia ||
                                        navigator.webkitGetUserMedia ||
                                        navigator.mozGetUserMedia ||
                                        navigator.msGetUserMedia);

                 navigator.getMedia(
                   {
                     video: true,
                     audio: false
                   },
                   function( stream ) {
                     if( navigator.mozGetUserMedia ) {
                       video.mozSrcObject = stream;
                     } else {
                       var vendorURL = window.URL || window.webkitURL;
                       video.src = vendorURL.createObjectURL( stream );
                     }
                     video.play();
                   },
                   function( err ) {
                     console.log( "An error occured! " + err );
                   }
                 );
               }

    function takePicture( videoTagID, imageTagID ) {
                 if( !videoTagID || ( ( typeof videoTagID ) != 'string' ) )
                   return;

                 if( !imageTagID || ( ( typeof imageTagID ) != 'string' ) )
                   return;

                 var video = document.getElementById( videoTagID );
                 var image = document.getElementById( imageTagID );

                 // Prepare the canvas
                 var canvas = document.createElement( 'canvas' );
                 canvas.width  = video.videoWidth;
                 canvas.height = video.videoHeight;
                 canvas.style.visibility = "hidden";

                 var context = canvas.getContext( '2d' );
                 context.drawImage( video, 0, 0 );
                 image.src = canvas.toDataURL('image/jpeg');
                 var a =makeblob(image.src);
                 console.log(makeblob(image.src));


        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:  image.src,
        })
            .done(function(data) {
                alert("success");
                console.log(data[0].faceAttributes.age)

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

                 return image.src;

                 }
  // Trigger the start
  $( document ).ready( function() {

      startCapture();

  });




  </script>

这里是我在此代码中的代码我使用网络流媒体并在屏幕上播放并在一段时间后捕获图像并希望在ajax数据中传递该图像我使用canvas dataurl并且还有makeblob方法但是有帮助怎么做这个并将图像传递给我传递image.src的数据，但它不能正常工作

here is the screenshot where error come in ajax data