vue實現pc端拍照上傳功能
阿新 • • 發佈:2021-09-30
本文例項為大家分享了實現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/"> 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,320,320); context2D.drawImage(video,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 = ON.stringify(param); uploadimg(a).then((res) => { console.log(res); });
下面是我的後臺接收程式碼
public function uploadhttp://www.cppcns.comImg($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'=>$savkoqOVepath)); }
如果想點選觸發 開啟攝像頭可以將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(err) { alert(err.name); } ); } }
以上就是本文的全部內容,希望對大家www.cppcns.com的學習有所幫助,也希望大家多多支援我們。