如何将网络摄像头或设备捕获的图像存储到站点文件夹？

Question

我正在使用以下代码使用设备相机拍摄图像、静态照片并在浏览器中显示。它工作正常，但我想做的是将具有唯一编号的图像存储到网站文件夹中，并将 link 存储到数据库中。所以我的问题是如何用js抓取图像数据并将其存储在具有参考编号的文件夹中。非常感谢任何帮助。

<html>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Take Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
let video = document.querySelector("#video");
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({video: true}).then((stream) =>{
       video.srcObject = stream;
       video.play();
    });
}
document.getElementById("snap").addEventListener("click", () => {
    context.drawImage(video, 0, 0, 640, 480); 
 });

    </script>
</body>
</html>

我找到了以下代码，但需要手动点击下载并选择一个文件夹'

function downloadCanvas(){  
    // get canvas data  
    var image = canvas.toDataURL();  
  
    // create temporary link  
    var tmpLink = document.createElement( 'a' );  
    tmpLink.download = 'image.png'; // set the name of the download file 
    tmpLink.href = image;  
  
    // temporarily add link to body and initiate the download  
    document.body.appendChild( tmpLink );  
    tmpLink.click();  
    document.body.removeChild( tmpLink );  
}
<button onclick="downloadCanvas()">Download Phot!</button>

我真的希望它能自动将图像保存到站点文件夹中以供说出照片。

Answer 1

我将告诉您我采用的方法并得出了结果。要保存文件，我们应该研究浏览器如何与本机文件系统交互。

方法一

看看浏览器有没有提供这样的api直接做？喜欢

OS.File.writeFile(writePath, file)

据我所知，我发现 chrome 它没有提供 API 来处理本机存储。 have a look here.

方法二

我们可以使用 JS 右键单击图像，即图像上的上下文菜单，然后单击 save image as 吗？简而言之，答案是否定的。（尝试使用 chrome.downloads.download）

方法 3

我们可以下载生成的图像吗？那将解决问题。可以参考我的回答here.

PFA 的工作代码。使用 canvas.toBlob() 方法将其转换为 Blob 图像，然后使用 URL.createObjectURL(blob); 转换为 ObjectURL 并使用 URL.

下载图像

<html>
<body>
  <video id="video" width="640" height="480" autoplay></video>
  <button id="snap">Take Photo</button>
  <canvas id="canvas" width="640" height="480"></canvas>
  <script>
      let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
let video = document.querySelector("#video");
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
  navigator.mediaDevices.getUserMedia({video: true}).then((stream) =>{
     video.srcObject = stream;
     video.play();
  });
}
document.getElementById("snap").addEventListener("click", () => {
  context.drawImage(video, 0, 0, 640, 480); 

  canvas.toBlob(function(blob){
    console.log(typeof(blob))
    var blobUrl = URL.createObjectURL(blob);
    var link = document.createElement("a"); 
    link.href = blobUrl;
    link.download = "image.jpg";
    link.innerHTML = "Click here to download the file";
    document.body.appendChild(link); 
    document.querySelector('a').click() 
  }, 'image/jpeg', 1); 

});


  </script>
</body>
</html>

Answer 2

一个最小的代码是，

document.getElementById("snap").addEventListener("click", () => {
        context.drawImage(video, 0, 0, 640, 480); 

        let blobUrl = canvas.toDataURL()
        let link = document.createElement("a"); 
          link.href = blobUrl;
          console.log(link)
          link.download = "image.jpg";
          link.innerHTML = "Click here to download the file";
          document.body.appendChild(link); 
          document.querySelector('a').click() 
      });

但上面的代码让您可以灵活地添加 mime 类型，您可以将图像指定为 jpeg 或 png（默认）或网络格式。

此外，如果您想存储图像的 base64 format，您可以提供 .txt 而不是扩展名 jpeg。

补充阅读：Here

文件将被下载到浏览器的默认下载位置。您可以 将下载位置 更改为您想要的位置，或者可以编写 OS 脚本（在 batch 或 bash 中）来移动图像文件到服务器文件位置。

如有任何问题，请发表评论。

如何将网络摄像头或设备捕获的图像存储到站点文件夹？

How to store a webcam or device captured image to a site folder?

html

javascript

html5-canvas