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

我使用以下代码使用设备相机捕获图像，静态照片并在浏览器中显示．它的工作很好，但我想做的是存储一个唯一的数字到一个网站文件夹的图像，并存储到数据库中的链接。所以我的问题是如何用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>

我真的希望它能自动保存图像到网站文件夹，比如照片。

我将告诉你我采取的方法和结果。为了保存文件，我们应该研究一下浏览器是如何与本地文件系统交互的。

方法1

查找浏览器是否提供任何这样的api来直接做到这一点?像

OS.File。writeFile (writePath、文件)

据我所知，我发现chrome没有提供API来处理本地存储。请看这里

方法2

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

方法3

我们可以下载生成的图像吗?这样问题就解决了。你可以参考我的回答。

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>

最简单的代码是:

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-type，你可以指定图像为jpeg或png(默认)或web格式。

另外，如果你想存储base64格式的图像，你可以给.txt而不是扩展名jpeg。

附加阅读:此处

文件将被下载到浏览器的默认下载位置。您可以更改下载位置或者可以编写操作系统脚本(batch或bash)将映像文件移动到服务器文件位置。

如有问题请留言。

相关内容

最新更新

热门标签：