弹来弹去跑马灯!

HTML获取摄像头画面，拍照截图保存

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>拍照功能</title>
<script>
function accessCamera() {
const video = document.getElementById("video");
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((error) => {
console.error("无法访问摄像头:", error);
});
}

function takePhoto() {
const video = document.getElementById("video");
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL("image/png");
downloadImage(dataUrl, "photo.png");
}

function downloadImage(dataUrl, filename) {
const link = document.createElement("a");
link.href = dataUrl;
link.download = filename;
link.click();
}
</script>
</head>
<body>
<h1>拍照功能</h1>
<button onclick="accessCamera()">启动摄像头</button>
<button onclick="takePhoto()">拍照并保存</button>
<video id="video" width="640" height="480" autoplay></video>
</body>
</html>

　　

posted @ 2025-07-25 10:40  wgscd  阅读(21)  评论(0)    收藏  举报