vue中調用本地攝像頭拍照生成base64的圖像

<template><div class="main"><el-card><div slot="header"><div><span>{{ $t('拍照') }}</span><i @click="drawImage(true)" class="el-icon-refresh"></i></div></div><div><div class="camera_outer" ref="imgbg"><div><videostyle="display: none"id="videoCamera":width="videoWidth":height="videoHeight"mutedautoplay></video><canvasstyle="display: none"id="canvasCamera":width="videoWidth":height="videoHeight"></canvas></div><div v-if="imgSrc" class="img_bg_camera"><img :src="imgSrc" alt class="tx_img" /></div></div></div></el-card></div> </template><script> export default {components: {},data() {return {/** 照相機彈窗模塊-start */imgSrc: undefined,thisVideo: null,thisContext: null,thisCancas: null,videoWidth: 250,videoHeight: 130,takePhotos: true, // 控制警告彈窗/** 照相機彈窗模塊-end */};},mounted() {this.init();},beforeDestroy() {this.stopNavigator();},methods: {init() {this.getCompetence();},// 調用攝像頭權限getCompetence() {//必須在model中render后才可獲取到dom節點,直接獲取無法獲取到model中的dom節點this.$nextTick(() => {const _this = this;this.thisCancas = document.getElementById('canvasCamera'); //這里是需要截取的canvas的Id名稱this.thisContext = this.thisCancas.getContext('2d');this.thisVideo = document.getElementById('videoCamera');// 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設置一個空對象if (navigator.mediaDevices === undefined) {navigator.menavigatordiaDevices = {};}// 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個對象// 使用getUserMedia，因為它會覆蓋現有的屬性。// 這里，如果缺少getUserMedia屬性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先獲取現存的getUserMedia(如果存在)let getUserMedia =navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.getUserMedia;// 有些瀏覽器不支持，會返回錯誤信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}// 否則，使用Promise將調用包裝到舊的navigator.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator,constraints,resolve,reject);});};}const constraints = {audio: false,video: {width: _this.videoWidth,height: _this.videoHeight,transform: 'scaleX(-1)',},};navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 舊的瀏覽器可能沒有srcObjectif ('srcObject' in _this.thisVideo) {_this.thisVideo.srcObject = stream;} else {// 避免在新的瀏覽器中使用它，因為它正在被棄用。_this.thisVideo.src =window.URL.createObjectURL(stream);}_this.thisVideo.onloadedmetadata = function () {_this.thisVideo.play();};_this.takePhotos = true;}).catch(err => {_this.takePhotos = false;console.log(err);});});},//繪制圖片drawImage() {if (!this.takePhotos) {this.imgSrc = '';this.$message.error($t('未檢測到攝像設備，或未打開權限'));return;}// 點擊，canvas畫圖this.thisContext.drawImage(this.thisVideo,0,0,this.videoWidth,this.videoHeight);// 獲取圖片base64鏈接，展示到界面中的也是這個url地址this.imgSrc = this.thisCancas.toDataURL('image/png');},//清除stopNavigator() {if (this.thisVideo && this.thisVideo !== null) {this.thisVideo = null;this.imgSrc = '';}},},computed: {}, }; </script> <style lang="scss" scoped> .camera_outer {width: 100%;height: 130px;.img_bg_camera {height: 130px;img {width: 100%;height: 100%;}} } </style>

總結

以上是生活随笔為你收集整理的vue调用摄像头拍照的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。