Javascript，将相机 (canvas) 中的照片存储到 local/server

Question

问题

我正在使用此站点的 javascript。

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

有关于 canvas 的信息，我可以:

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

例如，如何将 canvas 存储到本地或服务器？那么时髦的效果呢？ :)

并且是否可以在没有查看相机的情况下将相机的输入存储到文件中video tagwindow？

谢谢。

系统

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

更新

保存到特定文件夹怎么样？例如 javascript 脚本所在的同一文件夹？可能吗？谢谢。
问题是，是否可以避免用户访问摄像头？
还有在笔记本上不带指示灯的情况下开启摄像头，某种间谍模式？
而且访问网页的时候可以只拍照片存到服务器磁盘吗？

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 (thanks to this SO answer):

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

编辑：这里的工作示例 https://codepen.io/relativemc/pen/QWLoOZO

Javascript，将相机 (canvas) 中的照片存储到 local/server

Javascript, store photo from camera (canvas) to local/server

javascript

store

image