阿杰，你想用 HTML5 调用摄像头并截图，可以直接使用 getUserMedia + <video> + <canvas> 实现。下面给你一个完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 摄像头截图 Demo</title>
<style>
body { text-align: center; font-family: Arial; background: #f0f0f0; }
video, canvas { border: 1px solid #ccc; margin-top: 20px; }
button { margin-top: 10px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<h1>摄像头截图</h1>
<video id="video" width="400" height="300" autoplay playsinline></video>
<br>
<button id="snap">拍照</button>
<br>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const snapButton = document.getElementById('snap');
// 1️⃣ 获取摄像头视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
video.srcObject = stream;
video.play();
})
.catch(err => {
alert('摄像头无法访问: ' + err);
});
// 2️⃣ 点击按钮截图
snapButton.addEventListener('click', () => {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 可将截图转为 base64
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL);
});
</script>
</body>
</html>
✅ 特性说明
navigator.mediaDevices.getUserMedia- 请求摄像头权限
{ video: true, audio: false }表示只开启摄像头
<video>- 用于实时显示摄像头画面
playsinline避免 iOS 自动全屏
<canvas>+drawImage- 用于截图
- 可以生成 base64 图像用于上传或保存
- 移动端兼容
playsinline必须在 iOS Safari 上保持内嵌播放- 安卓、桌面浏览器直接支持
🔹 扩展功能
- 保存截图
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'snapshot.png';
link.click();
- 添加滤镜
context.filter = 'grayscale(100%)';
context.drawImage(video, 0, 0, canvas.width, canvas.height);
- 结合 Web Worker 做实时处理（如人脸识别、滤镜特效）
明白了，阿杰！下面给你一个 完整 HTML5 摄像头截图 + 滤镜特效 + 上传后台 Demo，特点如下：
- 调用摄像头实时预览
- 支持截图
- 可选择不同滤镜（灰度、反色、模糊）
- 截图可上传到后台（示例用
fetchPOST） - 移动端和桌面端兼容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像头截图+滤镜+上传 Demo</title>
<style>
body { text-align: center; font-family: Arial; background: #f0f0f0; }
video, canvas { border: 1px solid #ccc; margin-top: 20px; }
select, button { margin-top: 10px; padding: 8px 16px; font-size: 16px; }
</style>
</head>
<body>
<h1>摄像头截图 + 滤镜 + 上传</h1>
<video id="video" width="400" height="300" autoplay playsinline></video>
<br>
<label for="filter">选择滤镜:</label>
<select id="filter">
<option value="none">无滤镜</option>
<option value="grayscale(100%)">灰度</option>
<option value="invert(100%)">反色</option>
<option value="blur(3px)">模糊</option>
</select>
<br>
<button id="snap">拍照</button>
<button id="upload">上传截图</button>
<br>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const snapButton = document.getElementById('snap');
const uploadButton = document.getElementById('upload');
const filterSelect = document.getElementById('filter');
// 1️⃣ 获取摄像头
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
video.srcObject = stream;
video.play();
})
.catch(err => {
alert('无法访问摄像头: ' + err);
});
// 2️⃣ 拍照截图
snapButton.addEventListener('click', () => {
// 先应用滤镜
ctx.filter = filterSelect.value;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});
// 3️⃣ 上传截图
uploadButton.addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png'); // base64
// 发送到后台
fetch('/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ image: dataURL })
})
.then(res => res.json())
.then(data => {
alert('上传成功: ' + JSON.stringify(data));
})
.catch(err => {
alert('上传失败: ' + err);
});
});
</script>
</body>
</html>
🔹 功能说明
- 摄像头预览
getUserMedia({video:true})获取视频流playsinline保证 iOS 内嵌播放
- 滤镜效果
ctx.filter = ...支持 CSS 滤镜- 可实时在截图上应用滤镜
- 截图
canvas.drawImage(video,0,0)捕获当前视频帧
- 上传后台
- 将
canvas.toDataURL('image/png')转 base64 - 用
fetchPOST 到后台接口/upload（你可以换成真实接口）
- 将
- 移动端兼容
- 手指滑动不会触发全屏
- 安卓、iOS、桌面浏览器均可使用
发表回复