js实现拍照
使用HTML5和JavaScript实现拍照功能
通过浏览器的getUserMedia API可以访问设备的摄像头，结合canvas元素实现拍照功能。以下是一个完整的实现示例：
<!DOCTYPE html>
<html>
<head>
<title>拍照示例</title>
<style>
#video, #canvas {
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
#capture {
margin-top: 10px;
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<button id="capture">拍照</button>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureBtn = document.getElementById('capture');
const context = canvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
console.error('无法访问摄像头:', err);
});
captureBtn.addEventListener('click', () => {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = canvas.toDataURL('image/png');
console.log(imageData); // 这里可以上传到服务器或保存
});
</script>
</body>
</html>关键代码解析
navigator.mediaDevices.getUserMedia({ video: true })请求访问用户摄像头，返回一个Promise。成功后会得到一个媒体流对象。
video.srcObject = stream将媒体流赋值给video元素的srcObject属性，这样视频就会在页面上显示。
context.drawImage(video, 0, 0, canvas.width, canvas.height)将video当前帧绘制到canvas上。
canvas.toDataURL('image/png')将canvas内容转换为base64编码的图片数据，可以用于保存或上传。
注意事项
页面必须通过HTTPS协议或在localhost环境下运行，否则getUserMediaAPI会被浏览器阻止。
部分浏览器可能需要用户明确授权才能访问摄像头。如果用户拒绝授权，Promise会被拒绝。
移动设备上需要考虑横竖屏切换时的布局适配问题。
扩展功能
可以添加滤镜效果，通过修改canvas的像素数据实现。
添加照片保存功能，将base64数据转换为Blob对象后下载。
实现连续拍照功能，设置定时器自动捕获多张照片。
