如何使用JavaScript將數據發送到服務器

Question

這是我的第一篇文章，請發表您的評論，因為我需要詳細的指導。

背景，大二學生，受過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？
• 我該如何發送？
• 我在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版本： 如何從base64數據字符串中保存PNG圖片服務器端

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