Блог

Добрый день, стекеры,

Я работаю над веб-проектом, в котором мы воссоздаем сайт социальных сетей, похожий на snapchat. Я использую свою веб-камеру для съемки с использованием JS, и я записываю изображение в переменную с именем img следующим образом:

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

Для доступа к базе данных мы должны использовать PDO в PHP. В качестве альтернативы мы можем использовать AJAX, но jQuery строго запрещен. Мой вопрос в том, как я могу сохранить dataURL внутри моей базы данных? Все онлайн-уроки используют jQuery.

Обновить:

Я выполнил шаги, предложенные ниже, но когда я нажимаю кнопку привязки, она по-прежнему делает только снимок, но без URL или ничего.

 function sendimagetourl(image)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function()
            {
                if (this.readyState == 4 amp;amp; this.status == 200)
                {
                    alert( this.resoponseText);
                }
            }
            xhtp.open("GET", "saveimage.php?url=" image, true);
            xhttp.send();
        }
        //Stream Video
        if (navigator.mediaDevices amp;amp; 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. Спасибо за всю помощь!

Вы можете использовать JavaScript ajax

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

Вы можете использовать XMLHttpRequest() or fetch() , Blob , FormData to POST data URI to 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);