ajax不会将画布数据发送到php_Php_Ajax_Png_Send

ajax不会将画布数据发送到php

php ajax

ajax不会将画布数据发送到php,php,ajax,png,send,Php,Ajax,Png,Send,这是我的js中的代码 (function(){ var video = document.getElementById('video'), canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), photo = document.getElementById('photo'), vendorUrl = window.URL || window.webkit

这是我的js中的代码

(function(){
    var video = document.getElementById('video'),
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    photo = document.getElementById('photo'),
    vendorUrl = window.URL || window.webkitURL;
    datas = canvas.toDataURL('images/png');

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

    navigator.getMedia({
        video: true,
        audio: false
    }, function(stream){
        video.src = vendorUrl.createObjectURL(stream);
        video.play();
    }, function(error){

    });

    document.getElementById('capture').addEventListener('click',function(){
        context.drawImage(video, 0, 0, 400, 300);
        photo.setAttribute('src', canvas.toDataURL('images/png'));


        datas = canvas.toDataURL('images/png');



    });
    var canvasData = canvas.toDataURL("image/png");
        var ajax = new XMLHttpRequest();
        ajax.open("POST",'webcam.php',false);
        ajax.setRequestHeader('Content-Type', 'application/upload');
        ajax.send(canvasData);


})();

这是接收数据的php代码

<?php

    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    echo "true";
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;

  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
  $fp = fopen( 'test.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

<head>
    <meta charset="UTF-8">
    <Title>Document</title>

    <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

        <div class="booth">
            <video id = "video" width="400" height="300"></video>
            <a href="#" id ="capture" class="booth-capture-button">Snap Shot</a>
            <canvas id="canvas" width="400" height="300"></canvas>
            <img id ="photo" name = "photo" src="images/events/default.png" alt="Photo of you">
        </div>

    <script src="js/photo.js"></script>
    </body>

<?php  


?>


文件

应用程序打算拍摄用户的快照，并通过javascript保存照片。我试图找到一种方法将数据发送回php，并利用它保存到数据库中。我知道它是用base64编码保存的。我尝试了不同的Ajax方法，包括我保存的方法，但是数据往往不会发送任何数据到php文件夹

感谢您的高级指导。

我建议您检查一些代码点：

表单内容类型。要上载文件，必须使用“多部分/表单数据”

setRequestHeader（'Content-Type'，'multipart/formdata'）

您可以使用JS中的FormData类在发送前生成表单数据：

画布函数“toDataURL”没有mime类型“images/png”。只是“图像/png”

没有骰子，尝试了这两种方法，但没有向php发送任何内容。