在沒有JQuery的情況下將圖像存儲在數據庫中

Question

美好的一天堆高車，

我正在開發一個Web項目，在該項目中我們重新創建了類似於gmail的社交媒體網站。 我正在使用網絡攝像頭使用JS拍照，並將照片寫到名為img的var中，如下所示：

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

我們需要在PHP中使用PDO來訪問數據庫。 或者，我們可以使用AJAX，但是嚴格禁止使用JQuery。 我的問題是，如何將DataURL存儲在數據庫中？ 所有在線教程都使用JQuery。

更新：

我按照以下建議的步驟進行操作，但是當我單擊“捕捉”按鈕時，它仍然僅拍攝圖片，沒有URL或什么都沒有。

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

看來我有點傻瓜。 有兩個小的輸入錯誤，似乎發送的數據在url中是不可見的。 感謝您的所有幫助！

Answer 1

您可以使用XMLHttpRequest()或fetch() ， Blob和FormData將data URI POST到php 。 另請參閱使用Web應用程序中的文件

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

Answer 2

您可以使用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();