javascript - 如何用javascript向服务器发送数据

Question

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

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

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

我想做的事情:使用单独的按钮将该 Canvas 图像发送到服务器。

我已经做了什么:

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

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

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

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