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

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);
});

使用此代码，我可以将图片捕捉到 Canvas 中，但我试图将其保存到服务器文件夹中。在一些研究中，我认为这不可能仅使用 javascript，并且我将需要像 python 或 php 这样的脚本语言。由于我使用的是 django，因此 python 似乎是更好的选择。但我不知道该怎么做。

请帮助我

谢谢

Answer 1

如果您想将图片保存在后端，您需要先将图片数据从浏览器发送到后端。在 Canvas 上显示图像后，您可以通过以下方式获取 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图像字符串转换为图像文件，然后将其保存到文件系统。