需求：
在vue项目中使用摄像头拍摄照片传递，进行上传，如果上传成功可以获取到url链接，进行下一步的操作

内容梳理

1、首先进入页面打开摄像头
2、点击手动拍照进行拍摄照片，实时显示拍照效果
3、拿到拍摄的照片（base64格式）转换为 file 格式，上传后台
4、上传成功获取该图片的url链接

<template><div><video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video><canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas><button plain  @click="setImage()">手动拍照</button><p class="fail_tips">拍照，请正脸面向摄像头</p>// 给外面盒子设置宽高，可以限制拍照图片的大小位置范围<div class="result_img"><img :src="imgSrc" alt class="tx_img" width="100%" /></div><p class="res_tips">效果展示</p></div>
</template><script>
export default {data() {return {// 视频调用相关数据开始videoWidth: 245,videoHeight: 326,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo:false,//视频调用相关数据结束postVideoImg:'',// 图片上传后获取的url链接};},mounted(){// 第一步打开摄像头this.getCompetence() //调用摄像头},methods: {// 第三步、拍照图转换file格式上传，// 第四步、获取图片url链接postImg(){let formData = new FormData()formData.append('file', this.base64ToFile(this.imgSrc,'png'))formData.append("flag", "videoImg")// 额外参数// 对应的后台上传图片接口 === app/StudentVideoController/uploadFilethis.$axios.post('app/StudentVideoController/uploadFile',formData).then(res => {// console.log(res);if(res.data.code == '00'){// 图片文件传至后台 == 获取到该图片的url路径this.postVideoImg = res.data.FilePath//获得图片的url后，需要做什么//做的事情......}}).catch(error => {console.log(error);})},// 调用权限（打开摄像头功能）getCompetence() {var _this = this;_this.thisCancas = document.getElementById("canvasCamera");_this.thisContext = this.thisCancas.getContext("2d");_this.thisVideo = document.getElementById("videoCamera");_this.thisVideo.style.display = 'block';// 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先获取现存的getUserMedia(如果存在)var 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);});};}var 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(e) {_this.thisVideo.play();};}).catch(err => {console.log(err);});},//  第二步、绘制图片（拍照功能）setImage() {var _this = this;// canvas画图_this.thisContext.drawImage(_this.thisVideo,0,0,);// 获取图片base64链接var image = this.thisCancas.toDataURL("image/png");_this.imgSrc = image;//赋值并预览图片//这里是调用上传图片接口===== this.postImg() // 绘制完图片调用图片上传接口},// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},// base64 转为 file base64ToFile(urlData, fileName) {let arr = urlData.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bytes = atob(arr[1]); // 解码base64let n = bytes.lengthlet ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });},},destroyed: function () { // 离开当前页面this.stopNavigator() // 关闭摄像头},
}
</script>
<style>.result_img{width: 146px;height: 195px;background: #D8D8D8;}
</style>

步骤拆分

html部分

<!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"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>调用摄像头拍照</title>
</head>
<div id="app"><video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video><canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas><button plain  @click="setImage()">手动拍照</button><p class="fail_tips">这是拍照，请正脸面向摄像头，点击手动拍照</p><!-- 给外面盒子设置宽高，可以限制拍照图片的大小位置范围 --><div class="result_img"><img :src="imgSrc" alt class="tx_img" width="100%" /></div><p class="res_tips">这是效果展示</p></div>

js部分拆分

1、data数据

vm = new Vue({el:'#app',data:{// 视频调用相关数据开始videoWidth: 245,videoHeight: 326,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo:false,//视频调用相关数据结束postVideoImg:'',// 图片上传后获取的url链接},})

methods方法：第一步开启调用摄像头

vm = new Vue({mounted(){// 第一步打开摄像头// 调用摄像头this.getCompetence()},methods:{// 调用权限（打开摄像头功能）getCompetence() {var _this = this;_this.thisCancas = document.getElementById("canvasCamera");_this.thisContext = this.thisCancas.getContext("2d");_this.thisVideo = document.getElementById("videoCamera");_this.thisVideo.style.display = 'block';// 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先获取现存的getUserMedia(如果存在)var 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);});};}var 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(e) {_this.thisVideo.play();};}).catch(err => {console.log(err);});},}   })

methods方法：第二步拍照

vm = new Vue({methods:{//  第二步、绘制图片（拍照功能）setImage() {var _this = this;// canvas画图_this.thisContext.drawImage(_this.thisVideo,0,0,);// 获取图片base64链接var image = this.thisCancas.toDataURL("image/png");_this.imgSrc = image;//赋值并预览图片this.postImg() // 绘制完图片调用图片上传接口},}   })

methods方法：第三步上传拍照

vm = new Vue({methods:{// 第三步、拍照图转换file格式上传，// 第四步、获取图片url链接postImg(){let formData = new FormData()formData.append('file', this.base64ToFile(this.imgSrc,'png'))formData.append("flag", "videoImg")// 额外参数// 对应的后台接口 === app/StudentVideoController/uploadFilethis.$axios.post('app/StudentVideoController/uploadFile',formData).then(res => {// console.log(res);if(res.data.code == '00'){// 图片文件传至后台 == 获取到该图片的url路径this.postVideoImg = res.data.FilePath//获得图片的url后，需要做什么//做的事情......}}).catch(error => {console.log(error);})},}   })

methods方法：其他—base64图片转换为file , 关闭摄像头

destroyed 离开页面关闭摄像头

vm = new Vue({methods:{// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},// base64 转为 file base64ToFile(urlData, fileName) {let arr = urlData.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bytes = atob(arr[1]); // 解码base64let n = bytes.lengthlet ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });},},}，destroyed: function () { // 离开当前页面this.stopNavigator() // 离开页面关闭摄像头},  })

css样式

        .result_img{width: 146px;height: 195px;background: #D8D8D8;}

调用摄像头拍照效果

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台相关推荐

在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
matlab实时摄像头处理,在MATLAB中调用摄像头实时地显示图像
<在MATLAB中调用摄像头实时地显示图像>由会员分享,可在线阅读,更多相关<在MATLAB中调用摄像头实时地显示图像(1页珍藏版)>请在人人文库网上搜索. 1.clc;clf ...
在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
vue中eslint报Disallow self-closing on HTML void elements格式错误时的解决方案
当vue中eslint报Disallow self-closing on HTML void elements格式错误时我们需要在eslint中的rules里配置 'vue/html-self-cl ...
VUE实现调用摄像头和拍照功能
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.cs ...
如何在h5页面中调用摄像头来完成拍照之类的操作
一.该案例情况框架:vue: 运行环境:PC; 二.准备在pc端中需要使用https地址才可以访问到摄像头流信息, 所以在生产环境中,我们可以通过vue.config.js来配置localhost ...

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台

内容梳理

步骤拆分

html部分

js部分拆分

1、data数据

methods方法：第一步开启调用摄像头

methods方法：第二步拍照

methods方法：第三步上传拍照

methods方法：其他—base64图片转换为file , 关闭摄像头

destroyed 离开页面关闭摄像头

css样式

调用摄像头拍照效果

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台相关推荐

最新文章

热门文章