vue pc端调用摄像头进行拍照并实现裁剪上传

参考文档：MediaDevices.getUserMedia() - Web API 接口参考 | MDN

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式 - 会写代码的赖先生 - 博客园

使用vue-cropper裁剪图片

参考文档：Vue使用vue-cropper裁剪图片_hql1024的博客-CSDN博客

史上最全基于vue的图片裁剪vue-cropper使用_DT辰白-CSDN博客_vue-cropper

<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调用电脑摄像头API//navigator.mediaDevices.getUserMedia 调用后 会提示用户给予使用媒体输入的许可.返回一个 Promise 对象，//成功后会resolve回调一个 MediaStream 对象。//在移动设备上面调用摄像头也可以通过此种方式，如下的例子表示优先使用前置摄像头//{ audio: true, video: { facingMode: "user" } }前摄像头//{ audio: true, video: { facingMode: { exact: "environment" } } }强制使用后置摄像头//设置获取接近 1280x720 的相机分辨率//{ audio: true, video: { width: 1280, height: 720 } };navigator.mediaDevices.getUserMedia({audio: true,//调用音频video: true, //说明请求的媒体类型。调用视频}).then((success) => {// 摄像头开启成功this.$refs["video"].srcObject = success; //src 是播多媒体文件的；srcobj 是实时流// 实时拍照效果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);//canvas图片 转base64格式、图片格式转换、图片质量压缩//语法 canvas.toDataURL(type, encoderOptions); 设置转换的图片格式、图片质量压缩let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); let str = imgBase64.replace("data:image/jpeg;base64,", "");let strLength = str.length;let fileLength = parseInt(strLength - (strLength / 8) * 2); //let size = (fileLength / 1024).toFixed(2);// 由字节转换为KB 判断大小 console.log(size); //图片大小},// 关闭摄像头closeCamera() {if (!this.$refs["video"].srcObject) {return;}//MediaStream 接口的getTracks() 方法会返回一个包含媒体流中所有媒体对象let stream = this.$refs["video"].srcObject;let tracks = stream.getTracks();tracks.forEach((track) => {track.stop();});this.$refs["video"].srcObject = null;},},
};
</script>

vue pc端调用摄像头进行拍照并实现裁剪上传相关推荐

PC端调用摄像头并拍照
该博主的方法在mac本子上测试成功.原文连接: https://juejin.cn/post/6955290885806358564
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
JS PC端调用摄像头录视频截图上传文件
创建 Catcher 类 class Catcher {URL; // 上传地址dataStream; // 流数据mediaStream; //媒体流mediaRecorder; //录制对象sta ...
Vue调用摄像头录制视频和音频并上传给后端或下载到本地
下载插件 npm install --save webm-duration-fix 代码及作用调用摄像头 callCamera () {let _this = this;MediaUtils.get ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
这次给大家带来如何使用Vue2.0调用摄像头进行拍照,使用Vue2.0调用摄像头进行拍照的注意事项有哪些,下面就是实战案例,一起来看一下. import {Exif} from './exif.js' ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...

vue pc端调用摄像头进行拍照并实现裁剪上传

vue pc端调用摄像头进行拍照并实现裁剪上传相关推荐

最新文章

热门文章