zoukankan      html  css  js  c++  java
  • JavaScript 调用相机并拍照

    file形式访问

    <body>
    <button id="takePhoto">takePhoto</button>
    <div id="app"></div>
    <script>
      class Camera {
        constructor(root, width = 480, height = 320) {
          this.root = root
          this.width = width
          this.height = height
          this.video = null
          this.canvas = null
          this.canvasCtx = null
          this.stream = null
          this.photo = []
          this.init()
        }
    
        init() {
          const constraints = {
            video: {
               this.width,
              height: this.height
            }
          }
          navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
              this.mount(stream)
            })
            .catch(error => {
              console.log(error)
              alert('打开相机失败')
            })
        }
    
        mount(stream) {
          const video = document.createElement('video')
          const canvas = document.createElement('canvas')
          video.width = this.width
          video.height = this.height
          video.style.display = 'block'
          video.autoplay = 'autoplay'
          video.srcObject = stream
          canvas.width = this.width
          canvas.height = this.height
          this.video = video
          this.canvas = canvas
          this.canvasCtx = canvas.getContext('2d')
    
          if (!this.root) {
            document.body.appendChild(this.video)
            return false
          }
          if (typeof this.root === 'string') {
            this.root = document.querySelector(this.root)
          }
          this.root.appendChild(this.video)
        }
    
        takePhotos(showPhoto) {
          if (!this.canvas) return ''
          this.canvasCtx.drawImage(this.video, 0, 0, this.width, this.height)
          const base64 = this.canvas.toDataURL('image/jpg')
          if (showPhoto) {
            const wrapper = document.createElement('div')
            wrapper.style.position = 'relative'
            wrapper.style.display = 'inline-block'
            const image = new Image()
            image.style.display = 'block'
            image.src = base64
            const download = document.createElement('a')
            download.setAttribute('download', `${Date.now()}.jpg`);
            download.innerText = '下载照片';
            download.href = base64
            download.style.position = 'absolute'
            download.style.top = '0px'
            download.style.right = '0px'
    
            wrapper.appendChild(image)
            wrapper.appendChild(download)
    
            if (!this.root) {
              document.body.appendChild(wrapper)
            } else {
              this.root.appendChild(wrapper)
            }
          }
          this.photo.push(base64)
          return base64
        }
      }
    
      const camera = new Camera()
    
      const takePhoto = document.querySelector('#takePhoto')
      takePhoto.addEventListener('click', function () {
        camera.takePhotos(true)
      })
    
    </script>
    </body>
    
    为之则易,不为则难。
  • 相关阅读:
    [转]PYTHON-SCRAPY-WINDOWS下的安装笔记
    [转]Scrapy入门教程
    [转]Centos 6.5 安装 Scrapy 0.22.2成功
    Python的三个常用内置函数
    sublime连接Python的使用
    tornado-options(3)
    配置 PPP 封装和认证
    交换机验证 PVST 实验
    vlan间通信配置vtp模式
    convert expdp dmp file to SQL DDL statements
  • 原文地址:https://www.cnblogs.com/coderDemo/p/14135257.html
Copyright © 2011-2022 走看看