vue 调用摄像头拍照以及获取相片本地路径(实测有效)
在学习这个的时候有一点前提:这是针对手机功能的,所以最重要的是要用手机进行实时调试
包含图片的增加和删除功能
<template>
<div>
<!--照片区域-->
<div v-for="(urls, index) in imgs " style="float: left; margin: 10px ; border: 1px solid #ccc;">
<div style="text-align: right; position: relative;" v-on:click="deleteImg(index)">X</div>
<img :src="urls" width="100px" height="100px" />
</div>
<div style=" width: 100px; height: 100px; background-color: #ccc; border:1px solid #ccc; float: left; margin: 10px ;" v-on:click="imgClick()"></div>
<input style="float: left; display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile()">
</div>
</template> <script> export default{
data() {
return {
imgs:[]
}
},
methods:{
//删除图片
deleteImg:function(index){
this.imgs.splice(index,1);
},
//图片click
imgClick:function(){
document.getElementById("uploadFile").click();
},
//点击选中图片
readLocalFile: function () {
var localFile = document.getElementById("uploadFile").files[0];
var reader = new FileReader();
var content;
var current=this;
reader.onload = function(event) {
content = event.target.result;
current.imgs.push(content); //获取图片base64代码
}
reader.onerror = function(event) {
alert('error')
}
content = reader.readAsDataURL(localFile,"UTF-8");
var sss=document.getElementById("uploadFile").value;
console.log(sss);
}
},
mounted() {
},
created() { },
components: { }
}
</script> <style scoped> </style>
vue 调用摄像头拍照以及获取相片本地路径(实测有效)的更多相关文章
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...
- AForge调用摄像头拍照时设置分辨率
简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...
- C# - VS2019调用AForge库实现调用摄像头拍照功能
前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...
- js 获取文件本地路径
1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- OpenCv调用摄像头拍照代码
近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...
- android ——调用摄像头拍照和相册
先在布局文件中加入两个按钮和一个图片控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...
- html5中调用摄像头拍照
方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象.调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像 ...
随机推荐
- 通过Hack方式实现SDC中Stage配置联动刷新
目录 问题描述 如何从外部获取下拉列表参数 如何实现根据下拉列表选项动态刷新 总结 问题描述 最近项目组准备开发一个IoT平台项目,需要使用到StreamSets DataCollector组件进行数 ...
- Window7 定制 Explore中的右键菜单
win+R 命令 运行 regedit ,打开注册表 在 HKEY_CLASSES_ROOT\*\shell\VisualCode下创建针对文件的新增命令 command 在HKEY_CLASSE ...
- 20155324《网络对抗》Exp1 PC平台逆向破解(5)M
20155324<网络对抗>Exp1 PC平台逆向破解(5)M 实验目标 本次实践的对象是一个名为~pwn1~的~linux~可执行文件. 该程序正常执行流程是:~main~调用~foo~ ...
- kaldi chain模型的序列鉴别性训练代码分析
chainbin/nnet3-chain-train.cc int main(int argc, char *argv[]) { ... Nnet nnet; ReadKaldiObject(nnet ...
- 开发一个项目之npm
npm (nodejs平台上写的js模块的管理工具 下载.互相依赖等) npm install 本地项目的node_modules文件夹 , -g npm config prefix 目录eg: ...
- word20170102日用家电 household appliances
1. Vacuum cleaner: 吸尘器 2.Cordless vacuum cleaner: 无线吸尘器 3.Robotic vacuum cleaner: 机器人吸尘器 动词:to vacuu ...
- spring cloud 集群健康监控--turbine-dashboard仪表盘
这里仍然以Windows和jdk为运行环境,按照下面的步骤打包-运行-访问就能看到效果. 运维健康监控--hystrix-dashboard仪表盘 java -jar F:\jars-dashboar ...
- 51nod 2512
看错题目!!啊啊啊,都说了不能有前导,我怎么这么想当然呢!!另外1也是2的幂次方 代码: #include<iostream> #include<cstdio> #includ ...
- css悬浮提示框
效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- ASP.NET Core学习系列
.NET Core ASP.NET Core ASP.NET Core学习之一 入门简介 ASP.NET Core学习之二 菜鸟踩坑 ASP.NET Core学习之三 NLog日志 ASP.NET C ...