vue实现pc端拍照上传功能
本文实例为大家分享了vue实现pc端拍照上传功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
</head>
<body>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<button id="camera">拍照</button>
<canvas id="canvas" width="320" height="320">
</canvas>
</div>
<script type="text/javascript">
var video = document.getElementById('video');
var track;
var Camera= document.getElementById('camera');
window.addEventListener("DOMContentLoaded", function(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true},
function(stream) {
track = stream.getTracks()[0]; // 通过这个关闭摄像头
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
alert(err.name);
}
);
}
});
Camera.onclick = function(){
var canvas = document.getElementById('canvas');
var context2D = canvas.getContext("2d");
context2D.fillStyle = "#ffffff";
context2D.fillRect(0, 0, 320, 320);
context2D.drawImage(video, 0, 0, 320, 320);
var image_code =canvas.toDataURL("image/png");//要传给后台的base64
console.log(image_code)
if (null != track) {
track.stop();//关闭摄像头
}
};
</script>
</body>
</html>
上段代码会在打开网页的时候就会调用摄像头
传给后台的是个base64码
下面是我用vue传给后台的代码
var param = {
file:image_code2
}
var a = JSON.stringify(param);
uploadimg(a).then((res) => {
console.log(res);
});
下面是我的php后台接收代码
public function uploadImg($name="img",$path='img'){
$_POST = json_decode(file_get_contents('php://input'),true);
$param = $_POST;
$image_code = $param['file'];
$img = str_replace('data:image/png;base64,', '', $image_code);//获取base64码
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$name = time().".png";
$savepath = "./upload/".$name;//将图片存到的位置
file_put_contents($savepath,$data);//将内容写入文件
$this->ajaxReturn(array('status'=>'0','data'=>$savepath));
}
如果想点击触发 打开摄像头可以将camera中代码取出放在一个方法中即可
var Camera= document.getElementById('camera');
window.addEventListener("DOMContentLoaded", function(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
});
function demo(){
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true},
function(stream) {
track = stream.getTracks()[0]; // 通过这个关闭摄像头
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
alert(err.name);
}
);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js 2.0 移动端拍照压缩图片上传预览功能
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上
-
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期
-
Vue调用PC摄像头实现拍照功能
本文实例为大家分享了Vue调用PC摄像头实现拍照功能的具体代码,供大家参考,具体内容如下 项目需求:可以本地上传头像,也可以选择拍摄头像上传. 组件: 1.Camera组件:实现 打开.关闭摄像头.绘制.显示图片.用于上传 2.CameraDialog组件:使用ElementUI dialog组件 展示摄像头UI效果 3.外部调用CameraDialog组件,实现拍摄头像上传功能 4.本地上传可使用原生input.也可使用ElementUI upload组件 操作逻辑: 1.新增时将头像图片转为
-
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
-
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件.关于exif.js可以去他的GitHub上了解,这边直接 npm install exif-js --save 安装,然后import一下就可以使用了.以下就是源码,可以直接使用. <template> <div> &
-
vue调用本地摄像头实现拍照功能
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用.实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay
-
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上
-
vue实现pc端拍照上传功能
本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF8"> </head> <body> <div id="contentHolder"> <video id="video" width="320" heigh
-
vue实现移动端图片上传功能
本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下 <template> <div class="box"> <div class="upDiv"> {{labTex}} //标题 //上传按钮 <input ref="uploadInput" type="file" class='upinp' name="file" value=&q
-
Vue2.0 实现移动端图片上传功能
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple
-
Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)
-
使用Vue+Spring Boot实现Excel上传功能
1.使用Vue-Cli创建前端项目 运用vue-cli工具可以很轻松地构建前端项目,当然,使用WebStorm来构建会更加简洁(如图).本文推荐使用WebStorm,因为在后续开发中,IDE会使我们的开发更加简洁.部分配置如图: 2.Navbar编写 作为一个WebApp,Navbar作为应用的导航栏是必不可少的.在本项目中,笔者引入了bootstrap对Navbar进行了轻松地构建.在vue中我们需要在components文件夹中将我们的组件加进去,对于本工程来说,Navbar是我们要加入的第
-
Android4.4 WebAPI实现拍照上传功能
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后,getData()返回的URI没有包含真实的文件路径,而是像这样"content://com.android.providers.media.documents/document/image:1234",以至于用传统的方式找不到图片的路径.最简单的解决办法是用intent.ACTION_P
-
vue实现移动端input上传视频、音频
vue移动端input上传视频.音频,供大家参考,具体内容如下 html部分 <div class="title">现场视频</div> <div class="upLoad"> <label for="pop_video" id="labelr"> <video id="videoId" controls width="100%"&
-
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http://192.168.1.131:8080/task/add" enctype="multipart/form-data"> <input id="input-file" type="file" a
-
vue+axios+java实现文件上传功能
本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下 背景 vue.js + axios + element前端,Java后台实现的文件上传,简单例子 前端代码 document.vue <template> <div> <el-row class="action-row"> <el-col :span="9"> <el-butt
-
Vue+Element UI 实现视频上传功能
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL. 二.具体实现 1.效果图展示 2.HTML代码 <div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</spa