原生实现拍照

最新推荐文章于 2023-11-28 11:44:53 发布

Seven 遇见

最新推荐文章于 2023-11-28 11:44:53 发布

阅读量256

点赞数

文章标签：前端 javascript js

本文链接：https://blog.youkuaiyun.com/m0_67301837/article/details/127719423

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js实现拍照功能</title>
  </head>
  <body>
    <div id="contentHolder">
      <video id="video" autoplay style="background-color: #000"></video>
      <canvas style="display: none" id="canvas"></canvas>
      <img src=""  id="imgXX" />
    </div>
    <button id="btn_snap" onclick="takePhoto()">拍照</button>
    <script>
      const cvs = document.getElementById('canvas')
      const video = document.getElementById('video')
      cvs.width = cvs.height = video.width = video.height = 400
      const { width, height } = cvs
      const ctx = cvs.getContext('2d')

      const constraints = {
        video: {
          width,
          height
        }
      }
      navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        video.srcObject = stream
        video.onloadedmetadata = () => video.play()
      })
      function takePhoto() {
        ctx.drawImage(video, 0, 0, width, height)
        document.getElementById('imgXX').src = canvas.toDataURL('image/png')
      }
    </script>
  </body>
</html>