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

问题

我正在使用这个网站上的javascript

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

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

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

是否可以在不查看摄像头

视频标签的情况下将输入从摄像头存储到文件

谢谢

系统

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脚本所在的文件夹？可能吗？谢谢
还有一个问题，用户是否有可能避开摄像头
打开笔记本上没有指示灯的摄像头，一些间谍模式
当您访问网页时，是否可以只制作照片并保存到服务器上的磁盘
您可以使用canvas.toDataURL（“img/png”）

将图像src保存为base64：

要将其保存到本地计算机，您可以使用以下内容（感谢SO的回答）：

---

编辑：此处为工作示例

谢谢。我尝试复制工作示例，但它只在站点上显示捕获的图像，并没有保存。请看我的更新。错误是

未捕获引用错误：未定义saveAs

。谢谢。是否可以使用一些变量保存文件

image name.jpg

？例如日期和时间。谢谢。修改a是你应该考虑的事情。还研究了内置的方法，如。当你不确定如何做某事时，你应该首先尝试自己解决问题，这就是你如何变得更好的方法。如果你不能解决这个问题，那么试试谷歌的“如何在javascript中为字符串添加日期”就可以直接找到答案。在你用尽了这两个选项之后，再发布问题。@all告诉我，为什么

-2

？问题是关于代码的，那么它有什么错呢？我认为这是一件非常有用的事情。谢谢

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

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