javascriptでサーバーにデータを送信する方法

Question

ここに私の最初の投稿があります。

2年生の大学生、1年間のパイソン訓練を受けました。 2週間前に初めてjavascriptを学習し始めました。大学前にコーディングする経験はありません。

ウェブカメラを最初にストリームしたWebページを作成した後、ボタンをクリックすると、スナップショットが作成され、キャンバスの使用によってWebページに表示されます。

私がしたいこと： 別のボタンを使用してキャンバスイメージをサーバーに送信します。 navigator.getUserMedia（使用し

1. ）ウェブカメラのストリーミングのために：私はが行っている何

   。

2. canvas.toDataURL（）を使用してキャンバスイメージをbase64に変換しました。 「POST」リクエストを行うためのチュートリアルを見つけるためにオンライングーグルしようとしました

3. が、私は それを回避する方法がわからないです、簡単に言えば、私は、サーバーにデータを送信するコードを書く方法を 理解していません。

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スクリプトに次の'image.png'を画像と呼ばれている必要があります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のバージョンがあります。