惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

IT之家
IT之家
Recent Announcements
Recent Announcements
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The GitHub Blog
The GitHub Blog
MyScale Blog
MyScale Blog
爱范儿
爱范儿
GbyAI
GbyAI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
美团技术团队
Y
Y Combinator Blog
博客园 - 叶小钗
Apple Machine Learning Research
Apple Machine Learning Research
Martin Fowler
Martin Fowler
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
罗磊的独立博客
M
MIT News - Artificial intelligence
博客园 - Franky
V
Visual Studio Blog
I
InfoQ
V
V2EX
Hugging Face - Blog
Hugging Face - Blog
腾讯CDC
博客园 - 司徒正美
L
LangChain Blog

博客园 - wgscd

Git 无法访问 GitHub(unable to access ‘https://github.com/.../.git‘)问题解决教程 RapidOcrNet文字识别OCR C#+Audio绘制麦克风波形 一共免费大模型API AI聊天对话界面的HTML代码。 纯JavaScript代码实现保存Canvas图片到电脑 WPF鼠标拖动改变图片透明度 Fiddler自定义规则保存图片和提示The system proxy was changed自动重连 缩放 div 浏览器语音识别-webkitSpeechRecognition JS摄像头手势识别-Handsfree.js HTML,JS 模拟聊天界面UI JS获取元素相对窗口的位置和大小 C# 判断是否安装了ffmpeg shadow-root中的元素定位方法 JS MutationObserver监听DOM元素改变 Webview2动态设置页面video的Blob进行播放 C# 文件分割和文件合并 WPF刮刮乐 JS利用浏览器进行语言识别 WPF设置默认语言地区CultureInfo VS2022推送代码 到github错误: CertGetCertificateChain trust error CERT_TRUST_IS_PARTIAL_CHAIN的解决办法 C#正则表达式匹配候选词 使用ffmpeg去除音频静音
HTML获取摄像头画面,拍照截图保存
wgscd · 2025-07-25 · via 博客园 - wgscd

代码:

<!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>

fffffffffffffffff

test red font.

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