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对象,弹出拍照或摄像 ...
随机推荐
- Javascript实现base64的加密解密【转】
场景 这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致. ...
- Jdk和Spring Boot版本选择
==========================版本选择的原则:==========================1. 优先选择官方指定的long-term support(LTS)版本, 非L ...
- Java 集合系列03之 ArrayList详细介绍
ArrayList做为List接口中最常用的实现类,必须掌握. 一.ArrayList简介 与Java中的数组相比ArrayList的容量可以动态增加.它继承与AbstractList,实现了List ...
- Java虚拟机运行时内存区域简析
figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...
- 在Windows2008r2 安装.net4.5
WebApi 是比较高的环境下面开发 需要的环境是net4.5 或以上. Windows2008r2 里面没有这个环境必须自己安装.安装net4.5 必须sp1环境以上才能安装. 将Windows20 ...
- Python核心编程(网络编程)
1.python socket模块内置方法 2.tcp服务器伪代码 3.tcp客户端伪代码 4.socket模块属性 5.一个简单的tcp客户端和服务端 服务端代码: # encoding:utf-8 ...
- ueditor复制文本有多余的空行问题
今天从ueditor中复制文本,粘贴到记事本中发现每一行后面都多了一个空行. Ueditor中的文本如图: 本来只有三行,全选复制所有内容,再粘贴到记事本中发现有每一行文本后面都有多余的空行: 如果我 ...
- jquery获取value值时将数字型字符串前面的0自动截取处理方法
<li class="cwhite" value="02" id="02" onclick="getQuestionList ...
- 论文翻译:Ternary Weight Networks
目录 Abstract 1 Introduction 1.1 Binary weight networks and model compression 2 Ternary weight network ...
- [Kubernetes]关于 Kubernetes ,你想要的,都在这儿了
陆陆续续,关于 Kubernetes 写了有 20+ 篇文章了. 今天这篇文章来一个整合,从实践到理论,可以按需查看(我是按照博客发表时间来排序的,如果后续有想要更新的内容,也会及时更新到这篇文章中) ...