这篇文章主要讲解了“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如何实现pc端拍照上传功能”的内容了,经过本文的学习后,相信大家对vue如何实现pc端拍照上传功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。