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. Go 初体验 - 错误与异常处理 - recover和panic

    先看代码: 输出: 内建函数panic可以让我们人为地产生一个运行时恐慌.不过,这种致命错误是可以被恢复的.在Go语言中,内建函数recover就可以做到这一点. 实际上,内建函数panic和reco ...

  2. XML文件的读取

    <?xml version="1.0" encoding="gbk"?> <!--设置编码格式为gbk--> <!DOCTYPE ...

  3. vector创建二位数组

    默认初始化vector vector<vevtor<int> > arr(row, vector<int>(col, 0)); //指定行大小为row,列为col, ...

  4. uva 10123 - No Tipping dp 记忆化搜索

    这题的题意是 在双脚天平上有N块东西,依次从上面取走一些,最后使得这个天平保持平衡! 解题: 逆着来依次放入,如果可行那就可以,记得得有木板自身的重量. /********************** ...

  5. Mac 下 实现终端跳转 服务器 不用输入密码

    首先需要安装 expect 安装 expect  需要 tcl 依赖 第一步 下载tcl http://www.tcl.tk/software/tcltk/downloadnow84.tml 将下载好 ...

  6. react中对于context的理解

    一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...

  7. vue-cli3使用webpack-spritesmith配置雪碧图

    一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...

  8. sdoi2018旧试题 证明

  9. 安装ceph设置镜像源

    当安装ceph时 卡在这的时候ceph会替换成自己的镜像源 所以这个时候  赶紧再打开一个终端 替换成国内的清华大学的镜像源 就不会被替换回去了 ceph.repo 文件 [Ceph] name=Ce ...

  10. Linux驱动

    1 驱动分类 常规分类:字符设备.块设备.网络设备 字符设备:一种按字节来访问的设备,字符驱动负责驱动字符设备,这样的驱动通常实现open.close.read和write系统调用.如串口.LED.按 ...