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

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文件，然后将其保存到文件系统。