vue调用摄像头拍照

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调用摄像头拍照相关推荐

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
Ionic系列——调用摄像头拍照和选择图库照片功能的实现
2019独角兽企业重金招聘Python工程师标准>>> 1.需求描述最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插 ...
android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学习一下,如何才能在应用程序里调用手机的摄 ...
android 7调用摄像头,Android调用摄像头拍照（兼容7.0）
[实例简介] Android调用摄像头拍照(兼容7.0)Demo,原博客文章https://blog.csdn.net/u010356768/article/details/70808162 [实例截 ...
Python:opencv库实现调用摄像头拍照并保存到本地
导入 opencv-python库,复制代码即可运行 import cv2def picture_shoot(image_name='img.png', image_path=r'E:/') -> ...
HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
unity调用摄像头拍照
我的unity调用摄像头拍照因为做的是pc端的,所以不知道手机上效果是怎样的,据说代码是完全相同的. 废话不说,上代码, 打开摄像头代码: /// <summary>/// Opens ...

vue调用摄像头拍照

vue调用摄像头拍照相关推荐

最新文章

热门文章