原生js怎么拍照片的

原生JS拍照片：调用摄像头、获取媒体流、捕捉图像、显示预览

调用摄像头、获取媒体流、捕捉图像、显示预览是利用原生JavaScript进行拍照的核心步骤。具体来讲，利用JavaScript的navigator.mediaDevices.getUserMedia方法可以访问用户的摄像头，通过创建视频元素来显示实时预览，再通过绘制到Canvas元素上来捕捉图像。以下将详细介绍如何实现这些步骤。

一、调用摄像头

要使用摄像头，首先需要请求用户的权限并获取媒体流。通过navigator.mediaDevices.getUserMedia方法，可以简单地实现这一点。这个方法返回一个Promise对象，该对象在成功时返回媒体流（即视频流）。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 处理成功的媒体流
  })
  .catch(function(err) {
    console.error("Error accessing media devices.", err);
  });

二、显示预览

获取到媒体流后，需要将其显示在页面上的视频元素中。通过将媒体流设置为视频元素的srcObject属性，可以实现实时预览。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    let video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.error("Error accessing media devices.", err);
  });

三、捕捉图像

要捕捉图像，可以利用Canvas元素。将视频帧绘制到Canvas上，然后可以将其转换为图像数据。

function captureImage() {
  let video = document.querySelector('video');
  let canvas = document.querySelector('canvas');
  let context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  let image = canvas.toDataURL('image/png');
  // image 是Base64编码的图像数据
}

四、显示捕捉的图像

捕捉到图像后，可以将其显示在页面上，或进行进一步处理，比如上传到服务器。

function captureImage() {
  let video = document.querySelector('video');
  let canvas = document.querySelector('canvas');
  let context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  let image = canvas.toDataURL('image/png');
  // 显示捕捉的图像
  let imgElement = document.querySelector('img');
  imgElement.src = image;
}

五、完整示例

以下是一个完整的示例代码，展示了如何使用原生JavaScript实现拍照功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生JS拍照示例</title>
</head>
<body>
  <video autoplay></video>
  <button onclick="captureImage()">拍照</button>
  <canvas style="display: none;"></canvas>
  <img />
  <script>
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(function(stream) {
        let video = document.querySelector('video');
        video.srcObject = stream;
        video.play();
      })
      .catch(function(err) {
        console.error("Error accessing media devices.", err);
      });
    function captureImage() {
      let video = document.querySelector('video');
      let canvas = document.querySelector('canvas');
      let context = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      let image = canvas.toDataURL('image/png');
      // 显示捕捉的图像
      let imgElement = document.querySelector('img');
      imgElement.src = image;
    }
  </script>
</body>
</html>

通过这段代码，用户可以打开页面，允许访问摄像头，点击按钮进行拍照并显示捕捉到的图像。这个示例展示了如何利用原生JavaScript进行拍照，涵盖了调用摄像头、显示预览、捕捉图像和显示捕捉图像的完整流程。