Как отправить данные на сервер в javascript

Question

Здесь идет мое первое сообщение здесь, пожалуйста, будьте любезны с вашими комментариями, так как мне нужно подробное руководство здесь.

Фон, студент второго курса, 1-летний питон обучен. Только начал изучать javascript две недели назад. Отсутствие предварительного опыта в кодировании перед колледжем.

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

Что я хочу сделать: отправьте это изображение холста на сервер, используя отдельную кнопку.

Что есть сделано:

1. Используется navigator.getUserMedia() для веб-камеры потокового видео.

2. Преобразование изображения холста в base64 с использованием canvas.toDataURL().

3. Пробовал прибегая к помощи в Интернете, чтобы найти учебники, чтобы сделать «POST» запросов, но я не уверен, как работать вокруг него, короче говоря, я не понимаю, как написать код, который отправляет данные на сервер.

4. Пытался использовать jQuery, но все же я действительно очень смущен здесь.

$(document).ready(function(){ 
    $("#testbutton").click(function(){ 
     $.get("http://localhost:8080", 
     url, 
     function(){ 
      alert("OK"); 
     }); 
    }); 
}); 

• мне нужно преобразовать в base64 перед отправкой делать?
• Как отправить?
• Я прочитал на MDN, что navigator.getUserMedia устарел, как использовать MediaDevices.getUserMedia()?

Некоторые из моих фрагментов кода.

if(navigator.getUserMedia) { // Standard 
     navigator.getUserMedia(videoObj, function(stream) { 
      video.src = stream; 
      video.play(); 
     }, errBack); 
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
     navigator.webkitGetUserMedia(videoObj, function(stream){ 
      video.src = window.webkitURL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed 
     navigator.mozGetUserMedia(videoObj, function(stream){ 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 

Учебники следовали:

https://davidwalsh.name/browser-camera

Answer 1

Вы должны использовать AJAX для отправки данных на сервер.

Что-то вроде этого:

jQuery.ajax({ 
    method: "POST", 
    url: "save.php", 
    data: { image: canvasToDataURLString } 
}) 

Далее вам потребуется некоторый код стороне сервера сохранить изображение. Вот PHP версия модифицирована из этого ответа: How to save a PNG image server-side, from a base64 data string

$data = $_POST['image']; 

list($type, $data) = explode(';', $data); 
list(, $data)  = explode(',', $data); 
$data = base64_decode($data); 

file_put_contents('image.png', $data); 

Теперь вы должны иметь изображение называется 'image.png' рядом с вашим PHP скрипт.