vue调用摄像头进行拍照并能保存到本地的方法

更新时间：2022年04月11日 08:26:09 作者：小皮猪

本文主要介绍了vue调用摄像头进行拍照并能保存到本地的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1. 使用Vue.js

把网页内容Ctrl+s保存到本地然后添加到项目中

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2. 创建目录

3.实现：

1. index.html

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="vueapp">
		<video ref="video" autoplay width="400" height="300"></video>
		<button @click="btnTakePhotoClicked()">Take photo</button>
		<canvas ref="canvas"width="400" height="300"></canvas>
		
		<a href="" download="canvas.jpeg" id="save_herf">
		        <img src="" id="save_img" alt="">
		</a>
		</div>
		
		<script src="app.js"></script>
		
	</body>
</html>

2. app.js

代码：

 
new Vue({
	el:"#vueapp",
	mounted(){
		this._initVueApp();
		this.btnTakePhotoClicked();
	},
	
	methods:{
		async _initVueApp(){
			this.$refs.video.srcObject= await navigator.mediaDevices.getUserMedia({video:true,audio:false});			
			this._context2d=this.$refs.canvas.getContext("2d");
			this.canvas=this.$refs.canvas;
		},
		
		btnTakePhotoClicked(){
			this._context2d.drawImage(this.$refs.video,0,0,400,300)
			var img = document.createElement("img"); // 创建img元素
			img.src =this.canvas.toDataURL("image/png"); // 截取视频第一帧
			var svaeHref = document.getElementById("save_herf");
			console.log(img.src)
			
			var sd=document.getElementById("save_img");
			svaeHref.href = img.src;
			sd.src=img.src
			
		},
	}
});

4.效果

到此这篇关于vue调用摄像头进行拍照并能保存到本地的方法的文章就介绍到这了,更多相关vue调用摄像头拍照并保存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue Echarts实现带滚动效果的柱形图
这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
谈谈vue中mixin的一点理解
vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。下面给大家谈谈我对vue中mixin的一点理解，需要的朋友参考下吧
2017-12-12
vite多页面配置项目实战
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
Vue实现批量注册全局组件的示例代码
在项目开发中,我们经常会封装一些全局组件,然后在入口文件中统一导入,所以本文主要为大家详细介绍了Vue如何批量注册全局组件,感兴趣的小伙伴可以了解下
2024-01-01
vue中使用axios固定url请求前缀
这篇文章主要介绍了vue中使用axios固定url请求前缀的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue.js计算属性computed用法实例分析
这篇文章主要介绍了vue.js计算属性computed用法,结合实例形式分析了vue.js使用computed方式进行属性计算的相关操作技巧,需要的朋友可以参考下
2018-07-07
Vue数据表格增删改查与表单验证代码详解
这篇文章主要给大家介绍了关于Vue数据表格增删改查与表单验证的相关资料,Vue可以通过使用组件化的方式来实现表格的增删改查功能,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
Vue中数组与对象修改触发页面更新的机制与原理解析
这篇文章主要介绍了Vue中关于数组与对象修改触发页面更新的机制与原理简析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue-cli webpack2项目打包优化分享
下面小编就为大家分享一篇vue-cli webpack2项目打包优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue-quill-editor富文本编辑器上传视频功能详解
需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下
2023-05-05