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

Posted 2023-03-16

【中文标题】Javascript，将照片从相机（画布）存储到本地/服务器

【英文标题】：Javascript, store photo from camera (canvas) to local/server

【发布时间】：2020-01-25 14:27:13

【问题描述】：

问题

我正在使用这个网站的 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

更新

那么保存到特定文件夹呢？例如javascript脚本所在的同一文件夹？可能吗？谢谢。 还有一个问题，用户是否可以逃避摄像头访问？ 然后在笔记本电脑上打开摄像头但没有指示灯，某种间谍模式？ 访问网页时是否可以只拍照并保存到服务器上的磁盘？

【问题讨论】：

@all 告诉我，为什么是-2？问题是关于代码的，那么它有什么问题？我认为这是非常有用的事情。谢谢。

【参考方案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 SO 回答）：

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

【讨论】：

谢谢。我尝试了复制工作示例，但它只显示现场捕获的图像，没有保存。请看我的更新。错误是Uncaught ReferenceError: saveAs is not defined。谢谢。

是否可以用一些变量保存文件image-name.jpg？例如日期和时间。谢谢。

修改string 是您应该考虑的事情。还研究内置方法，如Date。当您不确定如何做某事时，您应该首先尝试自己解决解决方案，这就是您变得更好的方法。如果您无法解决解决方案，请尝试谷歌“如何在 javascript 中将日期添加到字符串”，例如会引导您直接找到答案。在您用尽这两个选项后，然后发布问题。