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移动端微信授权登录插件封装的实例
今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
如何使用 vxe-table 实现左边是树右边是表格联动功能
使用 vxe-table 来实现左边是树,右边是表格联动功能,当需要实现左右两侧联动时,表格 vxe-grid 配合分割模板 vxe-split 就很容易实现了,下面通过实例代码给大家介绍使用 vxe-table 来实现左边是树,右边是表格联动功能,感兴趣的朋友一起看看吧
2025-03-03
Vue3实现SSE(Server-Sent Events)连接
SSE 是一种允许服务器向浏览器推送事件的技术,这篇文章主要为大家详细介绍了如何通过vue3实现SSE(Server-Sent Events)连接,有需要的小伙伴可以了解下
2024-10-10
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
这篇文章主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
详解Vue中组件的缓存
这篇文章主要介绍了Vue中组件的缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
手把手教你Vue-cli项目的搭建
这篇文章主要为大家详细介绍了Vue-cli项目的搭建方法，文中图片介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue如何监听页面缓存事件
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue 悬浮窗且带自动吸附功能实现demo
这篇文章主要为大家介绍了vue 悬浮窗且带自动吸附功能实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)
这篇文章主要为大家介绍了echarts设置tootip轮播切换展示效果,vue3搭配vue-echarts粘贴即用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
2023-10-10
使用Vue写一个todoList事件备忘录经典小案例
学习了几天Vue之后终于迎来了第一个小案例,todoList是非常常见地一个小案例,下面这篇文章主要给大家介绍了关于使用Vue写一个todoList事件备忘录经典小案例的相关资料,需要的朋友可以参考下
2022-10-10