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

Question

这是我在这里的第一篇文章，请与您的意见相符，因为我需要详细的指导。

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

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

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

1. 使用navigator.getUserMedia（）进行网络摄像头流媒体播放。

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

3. 尝试使用谷歌在线搜索教程＆＃34; POST＆＃34;要求，但我 我不确定如何解决它，总之，我不明白怎么做 编写将数据发送到服务器的代码。

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'的图像。