如何將從網絡攝像頭捕獲的圖像保存到文件夾

Question

我正在開發Django Web應用程序。 在此應用程序中，用戶可以按下按鈕來觸發其網絡攝像頭並捕獲照片。 然后應將此照片保存到服務器。

我面臨的問題是，我無法保存照片。 到目前為止，這是我的代碼

HTML

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript的

// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        video: true
    }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});

使用此代碼，我可以將圖片捕捉到畫布中，但是我一直試圖將其保存到服務器文件夾中。 在一些研究中，我認為這不僅是使用javascript不可能實現的，而且我將需要像python或php這樣的腳本腳本。 由於我正在使用django，因此python似乎是一個更好的選擇。 但是我不確定該怎么做。

請幫我

謝謝

Answer 1

如果要將圖像保存在后端，則需要先將圖像數據從瀏覽器發送到后端。 在畫布上顯示圖像后，可以通過以下方式獲取Base64 String格式的圖像數據：

document.getElementById("snap").addEventListener("click", function() {
  context.drawImage(video, 0, 0, 640, 480);

  // get image data as string
  const imageString = canvas.toDataURL();

  // send image to server
  fetch('/image/save', {
    method: "POST",
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
      imageString: imageString, 
    }),
  })
});

然后在您的服務器上，您需要定義映像保存路徑，將Base64 Image字符串轉換為Image文件，然后將其保存到文件系統。