在没有JQuery的数据库中存储图像

时间:2016-10-18 06:07:18

标签: javascript php html ajax

好日子堆垛机,

我正在开展一个网络项目,我们在其中重新创建一个类似于Snapchat的社交媒体网站。我使用我的网络摄像头使用JS拍照,我将图片写入名为img的var,如下所示:

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

我们需要在PHP中使用PDO来访问数据库。或者我们可以使用AJAX,但严格禁止使用JQuery。我的问题是,如何将DataURL存储在我的数据库中?所有在线教程都使用JQuery。

更新

我按照下面建议的步骤操作,但是当我按下快照按钮时,它仍然只拍照,但没有网址或没有。

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

所以看起来我有点傻瓜。有两个小的拼写错误,似乎发送的数据在网址中是不可见的。谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

您可以将XMLHttpRequest()fetch()data URIFormData用于php 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); defaultConfig { multiDexEnabled true } 。另请参阅Using files from web applications

{
    "name":"Val",
    "subject":"Test"
}

答案 1 :(得分:1)

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