Speichern von Bild In Datenbank ohne JQuery

Question

Guten Tag Staplern,

Ich arbeite an einem Web-Projekt, in dem wir eine Social-Media-Website ähnlich wie Snapchat neu erstellen. Ich bin mit meiner Webcam Bilder machen JS verwenden, und ich schreibe das Bild an einen var img wie folgt aufgerufen:

var img = canvas.toDataURL("image/png"); 

Wir benötigten PDO in PHP verwenden, um die Datenbank zuzugreifen. Alternativ können wir AJAX verwenden, aber JQuery ist strengstens verboten. Meine Frage ist, wie kann ich die DataURL in meiner Datenbank speichern? Alle Online-Tutorials verwenden JQuery.

Update:

ich die Schritte folgen, wie unten vorgeschlagen, aber wenn ich den Druckknopf schlagen, ist es noch dauert nur das Bild, aber keine URL oder nichts.

function sendimagetourl(image) 
     { 
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function() 
      { 
       if (this.readyState == 4 && this.status == 200) 
       { 
        alert(this.resoponseText); 
       } 
      } 
      xhtp.open("GET", "saveimage.php?url="+image, true); 
      xhttp.send(); 
     } 
     //Stream Video 
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) 
     { 
      navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) { 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
      }); 
     } 
     //Snap Photo 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 
     var video = document.getElementById('video'); 

     document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);}); 

So scheint es, ich war ein bisschen dumm. Es gab zwei kleinere Tippfehler, und die gesendeten Daten scheinen in der URL nicht sichtbar zu sein. Danke für die Hilfe!

Answer 1

können Sie JavaScript Ajax

var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    alert(this.responseText); 
    } 
}; 
xhttp.open("GET", "saveimage.php?url="+url, true); 
xhttp.send(); 

Answer 2

Sie können XMLHttpRequest() oder fetch(), Blob, FormData-POSTdata URI zu php verwenden. Siehe auch Using files from web applications

var request = new XMLHttpRequest(); 
    request.open("POST", "/path/to/server", true); 
    request.onload = function() { 
    // do stuff 
    } 
    var data = new FormData(); 
    data.append("image", new Blob([img], {type:"image/png"}), "filename"); 
    request.send(data);