如何将从网络摄像头捕获的图像保存到文件夹

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字符串格式的图像数据：

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图像字符串转换为图像文件，然后将其保存到文件系统。