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

目录
  • 1. 使用Vue.js
  • 2. 创建目录
  • 3.实现：
  • 4.效果

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调用摄像头拍照并保存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue调用本地摄像头实现拍照功能

    前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用.实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay

  • Vue调用PC摄像头实现拍照功能

    本文实例为大家分享了Vue调用PC摄像头实现拍照功能的具体代码,供大家参考,具体内容如下 项目需求:可以本地上传头像,也可以选择拍摄头像上传. 组件: 1.Camera组件:实现 打开.关闭摄像头.绘制.显示图片.用于上传 2.CameraDialog组件:使用ElementUI dialog组件 展示摄像头UI效果 3.外部调用CameraDialog组件,实现拍摄头像上传功能 4.本地上传可使用原生input.也可使用ElementUI upload组件 操作逻辑: 1.新增时将头像图片转为

  • vue调取电脑摄像头实现拍照功能

    vue调取电脑摄像头实现拍照功能

    本文实例为大家分享了vue调取电脑摄像头实现拍照功能的具体代码,供大家参考,具体内容如下 实现效果图: 拍照前&拍照后(我电脑摄像头挡住的,所以图片是灰色) 1.点击拍照上传功能调取电脑摄像头权限 2.选择允许使用摄像头之后,页面摄像头区域开始显示画面 3.点击拍照按钮,右侧显示拍摄的图片.点击保存即可 完整代码: 我这里写的是一个组件,所以触发调取摄像头事件是从父组件传过来的.也可以直接写一个页面上. <template> <div class="camera-box

  • Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

    本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg

  • Vue实现调用PC端摄像头实时拍照

    Vue实现调用PC端摄像头实时拍照

    Vue之调用PC端摄像头实时拍照,供大家参考,具体内容如下 由于我使用的是点击按钮打开模态框拍照所以在这里吧按钮和模态框代码都粘贴如下. <!-- 打开模态框按钮--> <el-form-item label="*照片:" prop="headImage"> <el-input type="text" v-model="imgSrc" /> <el-col :span="1.

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

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

    目录 1. 使用Vue.js 2. 创建目录 3.实现: 4.效果 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></ti

  • C#调用摄像头实现拍照功能的示例代码

    前言 老师要求我们学生做一套拍照身份验证系统,经过长时间的学习,有了这篇文章,希望能帮到读者们. 正文 首先介绍本文的主角:AForge 创建一个C#项目,引用必备的几个DLL AForge.dll AForge.Controls.dll AForge.Imaging.dll AForge.Math.dll AForge.Video.DirectShow.dll AForge.Video.dll 这些DLL读者们可以在文末下载我附带的Demon 引用必要的命名空间 using AForge.Co

  • python实现调用摄像头并拍照发邮箱

    项目地址: https://github.com/flygaga/camera 思路 1.通过opencv调用摄像头拍照保存图像到本地 2.用email库构造邮件内容,保存图片以附件形式插入邮件内容 3.用smtplib库发送邮件到指定邮箱 4.生成 .exe 文件 5.设置开机自启(每次开机自动运行,启动相机,拍下照片发送到指定邮箱) 导入工具 import cv2 # pip install opencv-python -i {指定镜像源} 控制摄像头 from email.mime.ima

  • Java+OpenCV调用摄像头实现拍照功能

    Java+OpenCV调用摄像头实现拍照功能

    目录 环境准备 制作主界面 整体结构介绍 核心代码与知识点讲解 JPanel中如何显示摄像头的图像 OpenCV调用摄像头 使用摄像头拍照 完整代码 OpenCVUtil.java ImageUtils.java FileBean.java VideoPanel.java TakePhotoProcess.java FaceRecognize.java(核心主类) 随着我们对环境.Mat基本使用越来越熟练.Java Swing也逐步熟悉了起来.今天我们开始进入OpenCV驱动摄像头的几个使用场景

  • 微信小程序调用摄像头实现拍照功能

    本文实例为大家分享了微信小程序调用摄像头实现拍照的具体代码,供大家参考,具体内容如下 微信小程序开发文档 首先,需要用户授权摄像头权限,这一步是必须的 具体步骤: 1.获取用户当前授权状态,看是否已经授权,如果已经授权直接显示摄像头2.如果用户还没有授权,则调起授权弹框,用户允许授权则显示摄像头3.如果用户不允许,则提示用户去设置页面打开摄像头权限 用户授权之后,就可以进行拍摄了,微信的camera组件无法显示为圆形,我这里是用一张图片遮盖了 上代码: wxml: <view class='ca

  • vue使用keep-alive实现组件切换时保存原组件数据方法

    前言 最近在做一个精品课程后台管理系统,其中涉及文件上传和文件列表展示,我不想将他们写入一个组件,故分开两个组件实现. 问题:但由于上传文件需要时间,这时要是用户切换别的组件查看时,上传文件组件就销毁了,导致文件上传失败. 追求效果:想利用keep-alive实现上传组件切换时仍继续上传文件,而其他组件则不会存活. 使用keep-alive的过程 普通方法:直接使用keep-alive <keep-alive> <router-view /> </keep-alive>

  • Python3爬虫学习之将爬取的信息保存到本地的方法详解

    Python3爬虫学习之将爬取的信息保存到本地的方法详解

    本文实例讲述了Python3爬虫学习之将爬取的信息保存到本地的方法.分享给大家供大家参考,具体如下: 将爬取的信息存储到本地 之前我们都是将爬取的数据直接打印到了控制台上,这样显然不利于我们对数据的分析利用,也不利于保存,所以现在就来看一下如何将爬取的数据存储到本地硬盘. 1 对.txt文件的操作 读写文件是最常见的操作之一,python3 内置了读写文件的函数:open open(file, mode='r', buffering=-1, encoding=None, errors=None,

  • PHP获取远程图片并保存到本地的方法

    本文实例讲述了PHP获取远程图片并保存到本地的方法.分享给大家供大家参考.具体实现方法如下: <?php function GrabImage($url, $filename = "") { if ($url == ""):return false; endif; //如果$url地址为空,直接退出 if ($filename == "") { //如果没有指定新的文件名 $ext = strrchr($url, "."

  • php获取远程图片并下载保存到本地的方法分析

    本文实例讲述了php获取远程图片并下载保存到本地的方法.分享给大家供大家参考,具体如下: 远程图片指的是远端服务器上的数据我们可以通过php的许多函数来读取下载了,这里整理了两个可以自动下载远程图片并下载保存到本地的例子. 例1,可以自动识别图片类型然后进行对应的保存 /* *功能:php完美实现下载远程图片保存到本地 *参数:文件url,保存文件目录,保存文件名称,使用的下载方式 *当保存文件名称为空时则使用远程文件原来的名称 */ function getImage($url,$save_d

随机推荐