외부에 관리하는 사이트들이 여러개 있다보니 사이트의 모양을 비주얼 상 저장해야 할 일들이 생겨서 외부 사이트에 접속하여 스크린샷을 저장하는 기능을 찾아보았습니다.
php에서 브라우저를 열어서 표시되는 화면을 잡는 기능은 있는거 같던데,
그런게 아니라 백그라운드에서 코드만으로 그런 작업을 하는 기능은 없더군요 ㅠㅠ
다행히 인터넷에 재미있는 아이디어로 스크린샷을 잡는 기능을 구현해 놓은 분이 계셔서 해당 소스코드를 참조하여 구현하였습니다.
원소스의 링크는 https://lrl.kr/bbs/board.php?bo_table=free&wr_id=44&sfl=mb_id%2C1&stx=admin 여기 입니다.
원리는 구글의 스피드 테스트 API 중 웹사이트의 스크린샷을 잡아주는 기능을 이용하는 것인데,
아무래도 대상 사이트의 스피드 테스트를 진행한 이후 응답이 오는 것이라 응답이 좀 느린것은 감수해야 할 것 같습니다.
원 글에서는 https://developers.google.com/speed/docs/insights/v5/get-started?hl=ko 이 사이트에 접속하여 API Key를 받고 해당Key를 이용하는 방식으로 구현하던데, 문서를 읽어보니 초당 3회 미만의 요청의 경우 별도의 API Key를 이용하지 않아도 된다고 하여 Key 없이 표시하니 잘 나왔습니다
어차피 API 호출이라 충분히 다른 언어에서도 적용 가능하기 때문에 아래 소스코드를 참고하여서 적절한 곳에 이용하면 될 듯 합니다. 참고로 이미지는 data:image/jpeg;base64 형식으로 문자열로 오기 때문에 이미지 파일로 저장하려면 별도의 작업을 거쳐야 합니다. HTML의 경우 img tag에 src로 지정하면 이미지가 정상적으로 표시됩니다.
/**
* 구글의 page speed api를 이용하여 $url의 스크린샷을 base64로 인코딩 된 문자열 형태로 가져온다
*/
function getSiteScreen($url): string
{
$screen = "";
$encodedUrl = urlencode($url);
$adress = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$encodedUrl&category=CATEGORY_UNSPECIFIED&strategy=DESKTOP"; //&key=" . API_KEY;
$ch = curl_init($adress);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 180); // set timeout to 180 seconds
$response = curl_exec($ch);
if ($response === false) {
$error = curl_error($ch);
curl_close($ch); // close curl resource to free up system resources
throw new Exception("Curl Screen Get error: $error\n");
}
curl_close($ch);
$googledata = json_decode($response, true);
if ($googledata === null) {
throw new Exception("JSON Screen parsing error: " . json_last_error_msg() . "\n");
}
// undefined index 방지
if (isset($googledata["lighthouseResult"]["audits"]["final-screenshot"]["details"]["data"])) {
$screen = $googledata["lighthouseResult"]["audits"]["final-screenshot"]["details"]["data"];
} else {
echo "스크린샷 데이터를 찾을 수 없음\n";
}
return $screen;
}
첨언 : 좀더 큰 사이즈의 스크린샷 이미지는
$googledata["lighthouseResult"]["fullPageScreenshot"]["screenshot"]["data"]
여기서 찾을 수 있습니다.
Prev
Rss Feed