pc部分：

pc效果图:

实现代码：

<template><div><!--开启摄像头--><Button  type="primary"  @click="callCamera" style="margin-right: 10px;">开启摄像头</Button><!--关闭摄像头--><Button  type="primary"  @click="closeCamera">关闭摄像头</Button><!--canvas截取流--><canvas ref="canvas" width="640" height="480"></canvas><!--图片展示--><video ref="video" width="640" height="480" autoplay></video><!--确认--><Button  type="primary" @click="photograph">拍照</Button></div>
</template>
<script>export default {data () {return {}},methods: {// 调用摄像头callCamera () {// H5调用电脑摄像头APInavigator.mediaDevices.getUserMedia({video: true}).then(success => {// 摄像头开启成功this.$refs['video'].srcObject = success// 实时拍照效果this.$refs['video'].play()}).catch(error => {console.error('摄像头开启失败，请检查摄像头是否可用！')})},// 拍照photograph () {let ctx = this.$refs['canvas'].getContext('2d')// 把当前视频帧内容渲染到canvas上ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)// 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/pnglet imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)/**------------到这里为止，就拿到了base64位置的地址，后面是下载功能----------*/// 由字节转换为KB 判断大小let str = imgBase64.replace('data:image/jpeg;base64,', '')let strLength = str.lengthlet fileLength = parseInt(strLength - (strLength / 8) * 2)　　　 // 图片尺寸  用于判断let size = (fileLength / 1024).toFixed(2)console.log(size) 　　  // 上传拍照信息  调用接口上传图片 .........// 保存到本地let ADOM = document.createElement('a')ADOM.href = this.headImgSrcADOM.download = new Date().getTime() + '.jpeg'ADOM.click()},// 关闭摄像头closeCamera () {if (!this.$refs['video'].srcObject) returnlet stream = this.$refs['video'].srcObjectlet tracks = stream.getTracks()tracks.forEach(track => {track.stop()})this.$refs['video'].srcObject = null},}}
</script>

移动端部分：

通过input开启手机前置摄像头， accept='image/*'是开启摄像头capture

实现代码：

 HTML 部分：<input ref="file" type="file" accept="image/*" capture="user">JS 部分： 接口使用的Vuex调用   可忽略  // 压缩图片 and 旋转角度纠正compressImage (event) {let _this = thislet file = event.target.files[0]let fileReader = new FileReader()let img = new Image()let imgWidth = ''let imgHeight = ''// 旋转角度let Orientation = null// 缩放图片需要的canvaslet canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')// 图片大小  大于2MB 则压缩const isLt2MB = file.size < 2097152// 通过 EXIF 获取旋转角度 1 为正常  3 为 180°  6 顺时针90°  9 为 逆时针90°EXIF.getData(file, function () {EXIF.getAllTags(this)Orientation = EXIF.getTag(this, 'Orientation')})// 文件读取 成功执行fileReader.onload = function (ev) {// 文件base64化，以便获知图片原始尺寸img.src = ev.target.result}// 读取文件fileReader.readAsDataURL(file)// base64地址图片加载完毕后img.onload = function () {imgWidth = img.widthimgHeight = img.heightcanvas.width = img.widthcanvas.height = img.height// 目标尺寸let targetWidth = imgWidthlet targetHeight = imgHeight// 不需要压缩 不需要做旋转处理if (isLt2MB && imgWidth < 960 && imgHeight < 960 && !Orientation) return _this.XMLHttpRequest(file)if (isLt2MB && imgWidth < 960 && imgHeight < 960 && +Orientation === 1) return _this.XMLHttpRequest(file)// 大于2MB 、img宽高 > 960 则进行压缩if (!isLt2MB || imgWidth >= 960 || imgHeight >= 960) {// 最大尺寸let maxWidth = 850let maxHeight = 850// 图片尺寸超过 960 X 960 的限制if (imgWidth > maxWidth || imgHeight > maxHeight) {if (imgWidth / imgHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidthtargetHeight = Math.round(maxWidth * (imgHeight / imgWidth))} else {targetHeight = maxHeighttargetWidth = Math.round(maxHeight * (imgWidth / imgHeight))}}// canvas对图片进行缩放canvas.width = targetWidthcanvas.height = targetHeight// 图片大小超过 2Mb 但未旋转  则只需要进行图片压缩if (!Orientation || +Orientation === 1) {ctx.drawImage(img, 0, 0, targetWidth, targetHeight)}}// 拍照旋转 需矫正图片if (Orientation && +Orientation !== 1) {switch (+Orientation) {case 6:     // 旋转90度canvas.width = targetHeightcanvas.height = targetWidthctx.rotate(Math.PI / 2)// 图片渲染ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight)breakcase 3:     // 旋转180度ctx.rotate(Math.PI)// 图片渲染ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight)breakcase 8:     // 旋转-90度canvas.width = targetHeightcanvas.height = targetWidthctx.rotate(3 * Math.PI / 2)// 图片渲染ctx.drawImage(img, -targetWidth, 0, targetWidth, targetHeight)break}}// base64 格式   我这是vuex 形式 重点是 canvas.toDataURL('image/jpeg', 1)// _this.$store.commit('SAVE_FACE_IMAGE_BASE64', canvas.toDataURL('image/jpeg', 1))　　　　 // 调用接口上传// _this.upAppUserFaceByBase64()// 通过文件流格式上传　　　　 canvas.toBlob(function (blob) {_this.XMLHttpRequest(blob)}, 'image/jpeg', 1)}},// 上传base64方式upAppUserFaceByBase64 () {this.$store.dispatch('upAppUserFaceByBase64', {baseFace: this.$store.state.faceImageBase64}).then(res => {// 上传成功}).catch(err => {console.log(err)})},// 上传XMLHttpRequest (params) {// 图片ajax上传　　　 let action = '后台接口地址'let xhr = new XMLHttpRequest()　　　 let formData = new FormData()      formData.delete('multipartFile')formData.append('multipartFile', params)// 文件上传成功xhr.onprogress = this.updateProgressxhr.onerror = this.updateError// 开始上传xhr.open('POST', action, true)xhr.send(formData)},// 上传成功回调updateProgress (res) {// res 就是成功后的返回 },// 上传失败回调updateError (error) {console.log(error)},

vue调用摄像头pc+移动端相关推荐

VUE调用摄像头PC
页面效果实现代码 <template><div id="app"><router-view /><B ...
vue调用摄像头拍照
vue中调用本地摄像头拍照生成base64的图像 <template><div class="main"><el-card><div sl ...
Vue调用摄像头录制视频和音频并上传给后端或下载到本地
下载插件 npm install --save webm-duration-fix 代码及作用调用摄像头 callCamera () {let _this = this;MediaUtils.get ...
HTML5调用摄像头+视频特效+录制视频+录音+截图+变声+滤波+音频可视化
1.写在前面根据最近的学习,写了一个demo, 可以通过navigator.mediaDevices.getUserMedia()方法调用电脑摄像头,并实现了录制音频,录制视频,对摄像头的内容进行截 ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
VUE调用pc端摄像头
VUE项目调用pc端摄像头功能 (摄像头只可以用localhost启用项目访问,或者修改浏览器配置,底部有方法) 代码如下: <template> & ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
vue调用电脑端摄像头实时拍照
vue调用电脑端摄像头实时拍照需求描述功能实现效果展示需求描述点击照相机拍照,弹出照相机拍照弹窗,点击拍照按钮,截取录像的帧,点击保存,提交数据给后台. 功能实现 1.html模块 //点击 ...

vue调用摄像头pc+移动端

前言：

vue调用本地摄像头

目录:

pc部分：

pc效果图:

实现代码：

移动端部分：

通过input开启手机前置摄像头， accept='image/*'是开启摄像头capture

实现代码：

vue调用摄像头pc+移动端相关推荐

最新文章

热门文章