如何在javascript中将数据发送到服务器

Question

这是我的第一篇文章，请善待您的 cmets，因为我需要详细的指导。

背景，大学二年级学生，受过 1 年 Python 培训。两周前才开始学习javascript。大学之前没有编码经验。

我创建了一个网页，它首先流式传输网络摄像头，然后单击按钮，拍摄快照并通过使用画布将其显示在网页上。

我想做的事： 使用单独的按钮将该画布图像发送到服务器。

我做了什么：

1. 使用 navigator.getUserMedia() 进行网络摄像头流式传输。

2. 使用 canvas.toDataURL() 将画布图像转换为 base64。

3. 尝试在线搜索以查找执行“POST”请求的教程，但我 我不确定如何解决它，简而言之，我不明白如何 编写将数据发送到服务器的代码。

4. 尝试使用jQuery，但在这里我仍然很困惑。

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

• 发送前是否需要转换为base64？
• 如何发送？
• 我读过 在不推荐使用 navigator.getUserMedia 的 MDN 上，我该如何使用 MediaDevices.getUserMedia()？

我的一些代码 sn-ps。

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

现在您的 php 脚本旁边应该有一个名为 'image.png' 的图像。