美文网首页
vue 谷歌浏览器打开摄像头进行拍照

vue 谷歌浏览器打开摄像头进行拍照

作者: Pluto_7a23 | 来源:发表于2022-06-09 16:52 被阅读0次
 navigator.mediaDevices.getUserMedia({video: true}).then(success => {
                 // 摄像头开启成功
        this.$refs.takeA.$refs['video'].srcObject = success
                // 实时拍照效果
         this.$refs.takeA.$refs['video'].play()          
               }).catch(error => {
                  this.popup = false
                   this.$message({showClose: true,duration:3000,message:'摄像头开启失败,请检查摄像头是否可用!',type: 'error'});
  })

 <video ref="video" width="640" height="450" autoplay></video>   //Html
<el-button size="mini" type="primary" @click="photograph">拍摄</el-button>
 <el-button size="mini" type="primary" @click="Savethelocal">保存本地</el-button>
 // 拍照
        photograph () {
                    let ctx = this.$refs['canvas'].getContext('2d')
                    // 把当前视频帧内容渲染到canvas上
                    ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)
                    // 转base64格式、图片格式转换、图片质量压缩
                    let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
                   如需上传图篇 可以吧base64转换文件流 进行上传
                    let a = this.base64toFile(imgBase64)
                    this.img_base = this.blobToFile(a)
                    // 由字节转换为KB 判断大小
                    let str = imgBase64.replace('data:image/jpeg;base64,', '')
                    let strLength = str.length
                    let fileLength = parseInt(strLength - (strLength / 8) * 2)
                    // 图片尺寸  用于判断
                    let size = (fileLength / 1024).toFixed(2)
                },
  // 保存到本地
                Savethelocal(){
                     html2canvas(document.getElementById("imageWrapper")).then(canvas => {
                        let saveUrl = canvas.toDataURL('image/png')
                        let blob = this.base64ToBlob(saveUrl)
                        let evt = document.createEvent('HTMLEvents')
                        evt.initEvent('click', true, true)
                        let aLink = document.createElement('a')
                        aLink.download = new Date().getTime() + '.jpeg'
                        aLink.href = URL.createObjectURL(blob)
                        aLink.click()
                        if (aLink.href) {
                            this.$message({showClose: true,duration:3000,message:'保存成功',type: 'error'});
                        }
                    })
                },
  //base64转File
                base64toFile (dataurl, filename = 'file') {
                    let arr = dataurl.split(',')
                    let mime = arr[0].match(/:(.*?);/)[1]
                    let suffix = mime.split('/')[1]
                    let bstr = atob(arr[1])
                    let n = bstr.length
                    let u8arr = new Uint8Array(n)
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n)
                    }
                    
                    // return new File([u8arr], `${filename}.${suffix}`, {
                    //      type: mime
                    // }) 转File流

                    // return new Blob([u8arr], { type: mime }); 转Blob流
                },
    //Blob流转File
 blobToFile (theBlob, fileName = 'ocr1.jpeg')  {
                    theBlob.lastModifiedDate = new Date();
                    theBlob.name = fileName;
                    return theBlob;
                },

纵享丝滑

相关文章

网友评论

      本文标题:vue 谷歌浏览器打开摄像头进行拍照

      本文链接:https://www.haomeiwen.com/subject/hwpmmrtx.html