vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

PC端调用摄像头拍照上传base64格式到后台，这个没什么花里胡哨的骚操作，直接看代码（canvas + video）

<template><div><!--开启摄像头--><img @click="callCamera" :src="headImgSrc" alt="摄像头"><!--canvas截取流--><canvas ref="canvas" width="640" height="480"></canvas><!--图片展示--><video ref="video" width="640" height="480" autoplay></video><!--确认--><el-button size="mini" type="primary" @click="photograph"></el-button></div>
</template>
<script>
export default {data () {return {headImgSrc: require('@/assets/image/photograph.png')}},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格式、图片格式转换、图片质量压缩let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)// 由字节转换为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>

移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件流格式；移动端幺蛾子就多了，比如部分手机打开的不是前置摄像头，部分手机拍照图片旋转了，高清手机拍的图片非常大…

介绍： 1. 通过input 开启手机前置摄像头 accept=“image/*” 为开启摄像头 capture=“user” 为开启前置摄像头（微信公众号的话可以微信jssdk,但它不支持前置摄像头，默认后置，所以没用）
　　　 2. 通过 exif.js 判断旋转了多少度在通过canvas矫正
3. 图片太大或超过规定尺寸则通过canvas压缩
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)},

转载:https://www.cnblogs.com/ljx20180807/p/10839713.html

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式相关推荐

vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
uniapp实现拍照并上传base64格式的图片（记录一下~）
html结构 -- <uni-list><uni-list-item class="pro" title="图片" :showArrow=&q ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
PC端、移动端手机竖拍原图压缩上传顺时针旋转90°的解决方案
问题背景最近在做的项目中,不管是移动端还是后台系统都涉及到了手机照片压缩上传的问题,做完功能测试的时候发现图片回显的时候有些顺时针旋转了90°(竖拍照片,不管是ios还是android都存在这问题) ...
Android调用前后摄像头同时工作,安卓系统有没有手机前后摄像头同时使用，一边给别人拍一边可以自拍...
安卓系统有没有手机前后摄像头同时使用,一边给别人拍一边可以自拍以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 安卓系统 ...
前端解决手机拍照旋转问题及图片压缩上传
1.依赖 jquery.js 2.html部分 <input class="addImage" name="loadFile" type="f ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
android 前置摄像头预览时镜像翻转_全面屏时代，原来手机前置摄像头都隐藏着一些缺点，你发现了吗？...
随着真全面屏时代的到来,人们已经不再满足于刘海屏.水滴屏以及挖孔屏等,越来越多的手机厂商和消费者开始追求"100%全面屏".于是如何解决手机前置摄像头便成了最大的难题,毕竟只要在屏 ...
移动端实现图片压缩上传
移动端实现图片压缩上传目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均 ...

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式相关推荐

最新文章

热门文章