当前位置：首页 > JavaScript

js实现拍照

2026-04-06 01:48:24JavaScript

使用HTML5的getUserMedia API实现拍照功能

HTML5的getUserMedia API可以访问用户的摄像头，结合canvas元素可以实现拍照功能。以下是一个基本的实现方法：

<video id="video" width="400" height="300" autoplay></video>
<button id="capture">拍照</button>
<canvas id="canvas" width="400" height="300"></canvas>

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureButton = document.getElementById('capture');
const context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error("无法访问摄像头:", err);
  });

captureButton.addEventListener('click', () => {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  const imageData = canvas.toDataURL('image/png');
  // 可以将imageData保存或显示
});

使用WebRTC实现高质量拍照

WebRTC提供了更强大的媒体捕获能力，适合需要更高图像质量的场景：

const constraints = {
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    facingMode: 'environment'
  }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    video.srcObject = stream;
  });

保存拍照结果

可以将拍照结果保存为Blob对象或Base64编码的字符串：

js实现拍照

canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'photo.png';
  a.click();
}, 'image/png');

移动设备适配

针对移动设备需要添加一些额外的处理：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 现代浏览器支持
} else if (navigator.getUserMedia) {
  // 旧版API支持
} else {
  alert('您的浏览器不支持摄像头访问');
}

权限处理

良好的权限处理可以提升用户体验：

js实现拍照

navigator.permissions.query({ name: 'camera' })
  .then(permissionStatus => {
    permissionStatus.onchange = () => {
      if (permissionStatus.state === 'granted') {
        // 已授权
      } else {
        // 未授权
      }
    };
  });

图像处理选项

可以在拍照前后添加图像处理效果：

// 黑白效果
context.filter = 'grayscale(100%)';
context.drawImage(video, 0, 0, canvas.width, canvas.height);
context.filter = 'none';

兼容性考虑

不同浏览器可能需要不同的前缀处理：

navigator.getUserMedia = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;

错误处理

完善的错误处理机制：

navigator.mediaDevices.getUserMedia({ video: true })
  .catch(err => {
    if (err.name === 'NotAllowedError') {
      alert('请允许摄像头访问权限');
    } else if (err.name === 'NotFoundError') {
      alert('未找到可用的摄像头设备');
    } else {
      console.error('摄像头错误:', err);
    }
  });

标签: js