代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>將canvas獲取的圖片下載到本地</title>
</head>
<body>
<style>
video, canvas {
outline: 1px solid red;
}
</style>
<p>這裏通過拍照來獲取你的圖像，然後將其下載到本地。如果開啓攝像頭時有提示，請點擊允許</p>
<button onclick="startVideo()">點擊啓用攝像頭</button>
<button onclick="Shoot()">點擊拍照</button>
<button onclick="download()">點擊下載</button>
<br>
<p>左側是攝像頭當前拍攝中區域，右側圖片是已拍攝的圖像，下載的內容是右邊已拍攝的圖像</p>
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
//啓用攝像頭，開始拍攝
function startVideo() {
// video捕獲攝像頭畫面
navigator.mediaDevices.getUserMedia({
video: true,
}).then(success).catch(error)
function success(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}
function error(err) {
alert('video error: ' + err)
}
}
function Shoot() {
var context = canvas.getContext('2d');
//把當前視頻幀內容渲染到畫布上
context.drawImage(self.video, 0, 0, 640, 480);
}
//將圖片下載到本地
function download() {
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";
dom.click();
}
</script>
</body>
</html>