<!DOCTYPE html> <html lang="en"> <head> <title>js調用攝像頭拍照上傳圖片</title> <meta charset="utf-8"> </head> <body> <button onclick="openMedia()">開啟攝像頭</button> <video id="video" width="500px" height="500px" autoplay="autoplay"></video> <canvas id="canvas" width="500px" height="500px"></canvas> <button onclick="takePhoto()">拍照</button> <img id="imgTag" src="" alt="imgTag"> <button onclick="closeMedia()">關閉攝像頭</button> <script> let mediaStreamTrack=null; // 視頻對象(全局) let video ; function openMedia() { let constraints = { video: { width: 500, height: 500 }, audio: false }; //獲得video攝像頭 video = document.getElementById('video'); let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then((mediaStream) => { // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1]; mediaStreamTrack=mediaStream.getVideoTracks() video.srcObject = mediaStream; video.play(); }); } // 拍照 function takePhoto() { //獲得Canvas對象 let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); // toDataURL --- 可傳入'image/png'---默認, 'image/jpeg' let img = document.getElementById('canvas').toDataURL(); // 這里的img就是得到的圖片 console.log('img-----', img); document.getElementById('imgTag').src=img;
//上傳
$.ajax({
url:"/xxxx.do"
,type:"POST"
,data:{"imgData":img}
,success:function(data){
console.log(data);
document.gauges.forEach(function(gauge) {
gauge.value =data.data
});
}
,error:function(){
console.log("服務端異常！");
}
});
} // 關閉攝像頭 function closeMedia() { let stream = document.getElementById('video').srcObject; let tracks = stream.getTracks(); tracks.forEach(function(track) { track.stop(); }); document.getElementById('video').srcObject = null; } </script> </body>