Javascript，将照片从相机（画布）存储到本地/服务器

Question

问题

我正在使用此网站上的javascript。

https://developers.google.com/web/fundamentals/media/capturing-images/#acquire_access_to_the_camera

有关于画布的信息，我可以：

• 直接将其上传到服务器
• 本地存储
• 对图像应用时髦的效果

例如，如何从画布存储到本地或服务器？那时髦的效果呢？ ：）

并且可以在没有查看摄像机video tag窗口的情况下将摄像机的输入存储到文件吗？

感谢。

系统

Linux local 5.0.0-29-lowlatency #31-Ubuntu SMP PREEMPT Thu Sep 12 14:13:01 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

Answer 1

您可以使用canvas.toDataURL("img/png")将图像src保存为base64：

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
    // Get the image src (base64)
    const imgSrc=canvas.toDataURL("img/png");

    // Apply the src to an image element
    const img = new Image();
    img.src = imgSrc

    // Add the newly created image to the DOM
    // A html element with the class .image-holder needs to exist on the page
    document.querySelector('.image-holder').appendChild(img);

    // Store the src in local storage
    localStorage.setItem('imgSrc', imgSrc)
  });

要将其保存到本地计算机，您可以使用类似FileSaver的命令（感谢this这样的答案：]

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);

    // save the file
    canvas.toBlob(function(blob) {
        saveAs(blob, "image-name.jpg");
    });
  });