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

【问题标题】：ajax will not send canvas data to phpajax 不会将画布数据发送到 php
【发布时间】：2017-07-12 06:46:03
【问题描述】：

这是我的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 文件夹。

先谢谢你了。

【问题讨论】：

标签： php ajax png send

【解决方案1】：

我只是建议你检查一些代码点：

表单内容类型。要上传文件，您必须使用“multipart/form-data”

ajax.setRequestHeader('Content-Type', 'multipart/form-data');
发送前可以使用JS中的FormData类制作表单数据： https://developer.mozilla.org/en/docs/Web/API/FormData/append
Canvas 函数“toDataURL”没有 mime 类型“images/png”。只是“图像/png”

【讨论】：

没有骰子，两种方法都试过了，没有任何东西发送到 php。