본문 바로가기
Coding/PHP

[PHP] 특정 영역 자동 스크린샷 저장 후 가장 최신 이미지 DB 저장

by jamong1014 2022. 11. 30.
반응형

스크린샷 폼 (index.html)

<html>
    <head>
        <meta charset="utf-8">
        <title>study</title>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.9.1.js" crossorigin="anonymous"></script>
    </head>

    <body>
        <div id="screen" name="screen">
            <img src="87.JPG" style="width: 100px; height: 100px;">
        </div>
    </body>

</html>
<script type="text/javascript">
    html2canvas(document.getElementById('screen')).then(function(canvas) {

        var myImg = canvas.toDataURL("image/png");
        myImg = myImg.replace("data:image/png;base64,", "");

        $.ajax({
        type: "POST",
        data: {
            "imgSrc": myImg
        },
        dataType: "text",
        url: "save_process.php",
        success: function(data) {
        
            console.log(data);
            if (data == "SUCCESS") {
                function doAction1()
                {
                var target = document.createElement( "script" );
                target.setAttribute( "src", "upload.php" );
                document.getElementsByTagName( "body" )[0].appendChild( target );
                }
                
                doAction1();
            
            } else {
            alert("저장 실패");
            }
        },
        error: function(a, b, c) {
            alert("error");
        }
        });
        });

</script>

 

스크린샷 한 것을 특정 폴더에 저장 (save_process.php)

<?php

$imagedata = base64_decode($_REQUEST['imgSrc']);
$file_name = "capture_".date("YmdHis").".png";

$file = $_SERVER['DOCUMENT_ROOT'] . "/ttest/data2/" . $file_name;
file_put_contents($file, $imagedata);

echo "SUCCESS";

?>

* 주의 : $_SERVER['DOCUMENT_ROOT'] 부분은 서버의 절대경로를 나타내는 부분으로 서버의 절대 경로 기준으로 폴더를 지정해야 함 (상대 경로로 /data2/ 이런식으로 하면 안될 수 있음)

 

스크린샷 DB 저장 (upload.php)

<?php
    include "db.php";

    $files = scandir('data2', SCANDIR_SORT_DESCENDING);
    $newest_file = $files[0];
    $dir = 'C:/xampp/htdocs/ttest/data2/';


    $query = "insert into studytest (image) values (load_file('$dir$newest_file'))";
     
    
    if(mysqli_query($dbh, $query))
    {
        echo '<script type="text/javascript"> alert("image profile uploaded"); </script>';
    }else
    {
        echo '<script type="text/javascript"> alert("image profile failed"); </script>';
    }


?>

* data2 폴더를 SCANDIR_SORT_DESCENDING 내림 차순으로 정렬하여 가장 최신 파일($newest_file)을 찾고, SQL LOAD_FILE로 $newest_file$dir 식으로 합쳐서 저장

 

Index.html 접속하면 특정 영역 바로 스크린샷 하고 지정된 폴더에 저장한 후 저장된 스크린샷 중 가장 최신 파일을 자동 DB 저장되는 모습

 

 

참고 : https://yoshikixdrum.tistory.com/288

반응형

댓글