帮我用php语言写个一访问就拍照片的源码
由于PHP语言是服务器端语言,无法直接访问客户端的摄像头,因此无法实现一访问就拍照片。但是可以使用HTML5的getUserMedia API以及JavaScript的Canvas API来实现此功能。
以下是一个简单的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>WebCam</title>
<meta charset="utf-8">
<style>
#video {
border: 1px solid black;
width: 640px;
height: 480px;
}
#canvas {
display: none;
}
</style>
</head>
<body>
<video id="video"></video>
<canvas id="canvas"></canvas>
<button id="snap">拍照</button>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var snap = document.getElementById('snap');
// 获取摄像头权限
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log('无法获取摄像头权限', err);
});
// 拍照
snap.addEventListener('click', function() {
// 将视频画面绘制到canvas上
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 将canvas转换为图像数据URL
var dataURL = canvas.toDataURL('image/png');
// 发送数据URL到服务器端保存
var xhr = new XMLHttpRequest();
xhr.open('POST', 'save_photo.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send('photo=' + dataURL);
});
</script>
</body>
</html>
在上面的代码中,我们使用了getUserMedia()方法获取摄像头权限,然后将视频画面绘制到canvas上,并将canvas转换为图像数据URL发送到服务器端保存。服务器端代码可以使用PHP来实现。
例如,我们可以在服务器端创建一个save_photo.php文件,用于保存图像数据URL:
<?php
if (isset($_POST['photo'])) {
$photo = $_POST['photo'];
$filename = 'photo_' . date('YmdHis') . '.png';
file_put_contents($filename, base64_decode(str_replace('data:image/png;base64,', '', $photo)));
echo '保存成功';
}
?>
当我们点击“拍照”按钮时,会发送一个POST请求到save_photo.php文件,并将图像数据URL通过POST参数传递到服务器端。在服务器端,我们可以将数据URL转换为二进制数据并保存为PNG格式的图像文件。
原文地址: https://www.cveoy.top/t/topic/bzf1 著作权归作者所有。请勿转载和采集!