[PHP] 특정 영역 자동 스크린샷 저장 후 가장 최신 이미지 DB 저장
스크린샷 폼 (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 저장되는 모습
