Ajax nicht Leinwand Daten zu php

Dies ist der Code in meinem jsAjax nicht Leinwand Daten zu php

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


})();

Dies ist der PHP-Code die Daten

<?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 


?>

Die Anwendung eine Momentaufnahme des zu ergreifen gedenkt, zu erhalten senden Benutzer und speichert das Foto über Javascript. Ich versuche, einen Weg zu finden, die Daten zurück zu PHP zu senden und es zu verwenden, um in die Datenbank zu speichern. Ich verstehe, dass es in Base64 Encode gespeichert ist. Ich habe verschiedene Methoden von Ajax ausprobiert, einschließlich der, die ich gespeichert habe, aber die Daten tendieren dazu, keine Daten an den php-Ordner zu senden.

Vielen Dank im Voraus.

Quelle

2017-02-22 Jay

Ich schlage vor, Sie nur einige von Ihnen Codepunkte zu überprüfen:

Inhaltstyp Formular. Zum Hochladen von Dateien müssen Sie "multipart/form-data" verwenden.

ajax.setRequestHeader ('Content-Type', 'multipart/form-data');
können Sie Formdata-Klasse in JS verwenden, um Formulardaten vor dem Senden zu machen: https://developer.mozilla.org/en/docs/Web/API/FormData/append
Leinwand-Funktion "toDataURL" haben keinen MIME-Typen "images/png". Nur "image/png"

Quelle

2017-02-22 09:44:14

Kein Würfel, versuchte beide Methoden und nichts wird an den PHP gesendet. – Jay

Ajax nicht Leinwand Daten zu php

Antwort

Verwandte Themen