1.HTML

<video id="video" autoplay class="fileImg"></video>
<canvas id="canvas" width="640" height="480"></canvas>
 <div class="submitButton buttonData" @click="uploadImg">上传图片</div>
 

2.JS

<script>
    let aVideo = document.getElementById('video');
let aCanvas = document.getElementById('canvas');
let ctx = aCanvas.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia; //获取媒体对象(这里指摄像头)
navigator.getUserMedia({
video: true
}, gotStream, noStream); //参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function() {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function() {
// alert('摄像头成功打开!');
};
} function noStream(err) {
// alert(err);
} function uploadImg(){
ctx.drawImage(aVideo, 0, 0, 640, 480);
alert(aCanvas.toDataURL('image/png')) // 得到base64,需要后台将base64转换并上传到服务器,返回线上http路径
const res = await fileUpload({imgStr: aCanvas.toDataURL('image/png')}) // 调取后台接口 if (res.data.code == 0){
this.headImage = res.data.data.string //得到后台返回路径 }
}
</script>

js vue 在页面中将摄像头放在一个标签里展示,(模仿手机拍照功能)的更多相关文章

  1. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  2. 一JavaScript获取当前月份的前12个月,获取最近的12个月二js实现获取当前月份前的12个月份,格式化后放在一个数组里

    一 ,var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMon ...

  3. 点击后退按钮回到本页面中的另一个标签页(tab)

    在使用zepto进行微信网页开发的时候,遇到一个情况,在本页面存在四个TAB栏,每点击一个栏会显示相应的内容,下图这种: 现在有一个需求是,用户点击了后退按钮,需要回到上一次点击的tab栏. 这个需求 ...

  4. 如何对多个文件进行MODELSIM仿真? (由于是一个很大的项目,不可能把所有MODULE都放在一个文件里。 如何在ModelSim中对多个.V文件进行仿真?)

    可以将所有要编译的所有文件的名字做一个list.新建一个文本文档,重命名为vflist vflist内容例子如下(src为文件夹):src/base_addr_chk.vsrc/config_mux. ...

  5. Xpath提取一个标签里的所有文本

    content = etree.HTML(text) h = content.xpath('//h1') h1 = h[0].xpath('string(.)').strip()

  6. MongoDB 倾向于将数据都放在一个 Collection 下吗?

    不是这样的. Collection 的单个 doc 有大小上限,现在是 16MB,这就使得你不可能把所有东西都揉到一个 collection 里.而且如果 collection 结构过于复杂,既会影响 ...

  7. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  8. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  9. JS下拉页面时一个横幅的样式和js

    整理之前的代码,发现有一个js,就是页面往下浏览时,上面的商品名称和购买按钮在页面上方悬浮的,就整理下来,代码如下: <script type="text/javascript&quo ...

随机推荐

  1. php魔术变量以及命名空间

    魔术变量: PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们 ...

  2. noVNC支持手机自带键盘输入

    代码修改说明 novnc的web链接类似为:http://192.168.1.177:6080/vnc_auto.html?token=105356fa-bbe3-43e4-a0ce-7703dc42 ...

  3. MyBatis探究-----为实体类Bean取别名,配置typeAliases

    1.单个实体类设置别名 1.1 不使用alias <typeAliases> <!-- typeAlias:为某个java类型起别名 ; type:指定要起别名的类型全类名; 默认别 ...

  4. echart的x换行

    option = { legend: { y: 'bottom', data:['该业务正常类比例','该业务关注类比例','该业务不良类比例'] }, xAxis: { type: 'categor ...

  5. 韩顺平Linux学习笔记

    第 一 章    Linux开山篇 1.1 Linux课程的内容介绍 1.2Linux的学习方向 1.2.1. Linux运维工程师:主要做大公司中的电脑系统维护,保证服务器的正常运行,如服务器的优化 ...

  6. datagridview 查询数据库数据

    private void btnsearch_Click(object sender, EventArgs e) { if (txtSearch.Text != "") { thi ...

  7. vue路由详解

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...

  8. centos6删除mysql安装

    1.查看已经安装了的mysql包: 2.卸载mysql: 3.查看剩下的mysql安装包: 4.逐个删除剩下的mysql安装包: 5.删除完后再次查看,以确保已删除干净: 6.删除自己安装的mysql ...

  9. %zsy %lqs 随感

    今天是cj的大毒瘤zsy(对对,您说的都对,题目不难的啦,是我太菜啦)出题. 我校选手lqs仍然坚持高水平的发挥,wzy神犇却不在状态. 面对T1sb题(其实干了2h)和T3的原题(我&lqs ...

  10. Docker Registry私有仓库搭建

    部署registry 准备一个registry.mydocker.com 的证书 对私有registry取名registry.mydocker.com 目录规划 仓库数据目录:/data/docker ...