您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue如何實(shí)現(xiàn)pc端拍照上傳功能”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue如何實(shí)現(xiàn)pc端拍照上傳功能”吧!
具體內(nèi)容如下
<!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]; // 通過這個(gè)關(guān)閉攝像頭 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");//要傳給后臺(tái)的base64 console.log(image_code) if (null != track) { track.stop();//關(guān)閉攝像頭 } }; </script> </body> </html>
上段代碼會(huì)在打開網(wǎng)頁的時(shí)候就會(huì)調(diào)用攝像頭
傳給后臺(tái)的是個(gè)base64碼
下面是我用vue傳給后臺(tái)的代碼
var param = { file:image_code2 } var a = JSON.stringify(param); uploadimg(a).then((res) => { console.log(res); });
下面是我的php后臺(tái)接收代碼
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);//將內(nèi)容寫入文件 $this->ajaxReturn(array('status'=>'0','data'=>$savepath)); }
如果想點(diǎn)擊觸發(fā) 打開攝像頭可以將camera中代碼取出放在一個(gè)方法中即可
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]; // 通過這個(gè)關(guān)閉攝像頭 video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { alert(err.name); } ); } }
感謝各位的閱讀,以上就是“vue如何實(shí)現(xiàn)pc端拍照上傳功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)vue如何實(shí)現(xiàn)pc端拍照上傳功能這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。