จับภาพ web screenshot ด้วย Google PageSpeed API

<?php
// เร่มต้นการทดสอบคำนวณเวลาการทำงาน calculate time
$time_start = microtime(true); 
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
// require_once("../dbconnect.php"); // กำหนด path ให้ถูกต้อง

// กำหนด url เว็บไซต์ที่ต้องการ
$webURL= "https://www.ninenik.com";
$param = array(
	"strategy"=>"mobile", // comment ปิดส่วนนี้ หากต้องการผลแบบ desktop
	"url"=>$webURL
);
$qury_str = http_build_query($param);

// ใช้วิธี cURL
try{
	$endpontURL = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?".$qury_str;
	$ch = curl_init();
	curl_setopt( $ch, CURLOPT_URL, $endpontURL);
	curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1);
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
	$result = curl_exec( $ch );
	$screen_shot_result = json_decode($result,true);
	$screen_shot = $screen_shot_result['lighthouseResult']['audits']['final-screenshot']['details']['data'];
}finally{
	curl_close( $ch );
}

if(isset($screen_shot) && !empty($screen_shot)){
	echo "<img src='{$screen_shot}' />";
}

// ส่วนกำหนดเวลาจบการทำงาน สำหรับคำนวณ
$time_end = microtime(true);
// เวลาการทำงาน ในหน่วยวินาที และ นาที
$execution_time_second = $time_end - $time_start;
$execution_time_minute = floor((int)$execution_time_second/60) + ((int)$execution_time_second%60)*0.01;

// เวลาในการทำงานปรมวลผลของคำสั่ง
echo '<br/><br/><b>Total Execution Time:</b> '.$execution_time_second.' Seconds';
echo '<br/><b>Total Execution Time:</b> '.$execution_time_minute.' Minutes';
?>

<?php
// เร่มต้นการทดสอบคำนวณเวลาการทำงาน calculate time
$time_start = microtime(true); 
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
// require_once("../dbconnect.php"); // กำหนด path ให้ถูกต้อง

// กำหนด url เว็บไซต์ที่ต้องการ
$webURL= "https://www.ninenik.com";
$param = array(
	"strategy"=>"mobile", // comment ปิดส่วนนี้ หากต้องการผลแบบ desktop
	"url"=>$webURL
);
$qury_str = http_build_query($param);

// ใช้ file_get_contents 
$screen_shot_json_data = file_get_contents("https://www.googleapis.com/pagespeedonline/v5/runPagespeed?".$qury_str);
$screen_shot_result = json_decode($screen_shot_json_data,true);
$screen_shot = $screen_shot_result['lighthouseResult']['audits']['final-screenshot']['details']['data'];

if(isset($screen_shot) && !empty($screen_shot)){
	echo "<img src='{$screen_shot}' />";
}

// ส่วนกำหนดเวลาจบการทำงาน สำหรับคำนวณ
$time_end = microtime(true);
// เวลาการทำงาน ในหน่วยวินาที และ นาที
$execution_time_second = $time_end - $time_start;
$execution_time_minute = floor((int)$execution_time_second/60) + ((int)$execution_time_second%60)*0.01;

// เวลาในการทำงานปรมวลผลของคำสั่ง
echo '<br/><br/><b>Total Execution Time:</b> '.$execution_time_second.' Seconds';
echo '<br/><b>Total Execution Time:</b> '.$execution_time_minute.' Minutes';
?>

composer require google/apiclient:"^2.0"

<?php
// เร่มต้นการทดสอบคำนวณเวลาการทำงาน calculate time
$time_start = microtime(true); 
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
// require_once("../dbconnect.php"); // กำหนด path ให้ถูกต้อง


// include composer autoload
require_once '../vendor/autoload.php'; // กำหนด path ให้ถูกต้อง

// กำหนด server environment.กำหนดไฟล์ json ของ service account ที่สร้างใน google cloud console
putenv('GOOGLE_APPLICATION_CREDENTIALS=xxxxx.json');
// กำหนดการใช้งาน client api
$client = new Google_Client();
$client->useApplicationDefaultCredentials();
$client->addScope("openid");
//var_dump($client);

// สร้าง HTTP Client
$httpClient = $client->authorize();

// สร้าง pagespeed service 
$pagespeedonlineService = new Google_Service_Pagespeedonline($client);
$pagespeedapi = $pagespeedonlineService->pagespeedapi;

// กำหนด url เว็บไซต์ที่ต้องการ
$webURL= "https://www.ninenik.com";
$param = array(
	"strategy"=>"mobile", // comment ปิดส่วนนี้ หากต้องการผลแบบ desktop
	"url"=>$webURL
);

// ใช้ google pagespeed library
$response = $pagespeedapi->runpagespeed($webURL,$param);
$screen_shot_result = $response;
$screen_shot = $screen_shot_result['lighthouseResult']['audits']['final-screenshot']['details']['data'];

if(isset($screen_shot) && !empty($screen_shot)){
	echo "<img src='{$screen_shot}' />";
}

// ส่วนกำหนดเวลาจบการทำงาน สำหรับคำนวณ
$time_end = microtime(true);
// เวลาการทำงาน ในหน่วยวินาที และ นาที
$execution_time_second = $time_end - $time_start;
$execution_time_minute = floor((int)$execution_time_second/60) + ((int)$execution_time_second%60)*0.01;

// เวลาในการทำงานปรมวลผลของคำสั่ง
echo '<br/><br/><b>Total Execution Time:</b> '.$execution_time_second.' Seconds';
echo '<br/><b>Total Execution Time:</b> '.$execution_time_minute.' Minutes';
?>

<script>
function run() {
  const url = setUpQuery();
  fetch(url)
    .then(response => response.json())
    .then(json => {
      // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
      // to learn more about each of the properties in the response object.
      showInitialContent(json.id);
      const cruxMetrics = {
        "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
        "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
      };
      showCruxContent(cruxMetrics);
      const lighthouse = json.lighthouseResult;
      const lighthouseMetrics = {
        'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,
        'Speed Index': lighthouse.audits['speed-index'].displayValue,
        'Time To Interactive': lighthouse.audits['interactive'].displayValue,
        'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,
        'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,
        'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue
      };
      showLighthouseContent(lighthouseMetrics);
    });
}

function setUpQuery() {
  const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  const parameters = {
    url: encodeURIComponent('https://www.ninenik.com')
  };
  let query = `${api}?`;
  for (key in parameters) {
    query += `${key}=${parameters[key]}`;
  }
  return query;
}

function showInitialContent(id) {
  document.body.innerHTML = '';
  const title = document.createElement('h1');
  title.textContent = 'PageSpeed Insights API Demo';
  document.body.appendChild(title);
  const page = document.createElement('p');
  page.textContent = `Page tested: ${id}`;
  document.body.appendChild(page);
}

function showCruxContent(cruxMetrics) {
  const cruxHeader = document.createElement('h2');
  cruxHeader.textContent = "Chrome User Experience Report Results";
  document.body.appendChild(cruxHeader);
  for (key in cruxMetrics) {
    const p = document.createElement('p');
    p.textContent = `${key}: ${cruxMetrics[key]}`;
    document.body.appendChild(p);
  }
}

function showLighthouseContent(lighthouseMetrics) {
  const lighthouseHeader = document.createElement('h2');
  lighthouseHeader.textContent = "Lighthouse Results";
  document.body.appendChild(lighthouseHeader);
  for (key in lighthouseMetrics) {
    const p = document.createElement('p');
    p.textContent = `${key}: ${lighthouseMetrics[key]}`;
    document.body.appendChild(p);
  }
}

run();
</script>

fetch(url)
.then(response => response.json())
.then(data => {
	// ข้อมูลสุดท้าย
});

response => response.json()

<script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
      crossorigin="anonymous"></script>
<script>
// เรียกใช้งานฟังก์ชั่นสำหรับดึงข้อมูลรุป screenshot ใช้โหมดสำหรับมือถือ
runpagespeed("https://www.ninenik.com",true);
// ฟังก์ชั่น จับภาพ web screenshot
function runpagespeed(url, mobile){
	const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
	var parameters = {
		url: url
	};  
	if(mobile){
		parameters["strategy"] = "mobile";
	}
	let query = `${api}?`;
	query += $.param(parameters);
	let screenshotData;  
	fetch(query)
	.then(response => response.json())
	.then(json => {
		let lighthouse = json.lighthouseResult;
		screenshotData = lighthouse.audits['final-screenshot']['details'].data;
		console.log(screenshotData);  // ข้อมูลรุป อยู่ในรูปแบบ  data:image/jpeg;base64,/9j/4AAQSkZ.......
	});	
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">  
	<title>Document</title>
</head>
<body>

<div class="wrap-form w-50 mx-auto mt-5">
	<div class="input-group mb-3">
	<div class="input-group-prepend">
	  <select class="custom-select" name="view_mode">
		<option value="0">Desktop</option>
		<option value="1">Mobile</option>
	  </select>	  		
	  </div>  
	  <input type="url" class="form-control" name="web_url" value="https://www.ninenik.com" placeholder="กรอก url">	  
	  <div class="input-group-append">
		<button class="btn btn-primary" type="button" name="btn_screenshot">Get Screenshot</button>
	  </div>
	</div>
</div>
<div class="loading-widget w-50 mx-auto align-items-center d-none">
	<div class="spinner-border text-primary mr-2" role="status"></div>
	<strong class="text-primary">Loading...</strong>
</div>
<div class="wrap-show w-50 mx-auto">

</div>
<script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
      crossorigin="anonymous"></script>
<script>
$(function(){
	$('[name="btn_screenshot"]').on("click", function(){
		const btn = $(this); // ปุ่มกด
		const modeSelect = $('[name="view_mode"]').val(); // โหมดที่เลือก
		const webUrl = $('[name="web_url"]').val(); //url เว็บ
		btn.attr("disabled",true);
		var mode = (modeSelect==0)?false:true;
		$(".loading-widget.d-none").toggleClass("d-none d-flex"); // loading ที่ซ่อนให้แสดง
		$(".wrap-show").html(""); // รีเซ้ตข้อมูลรูปที่แสดงก่อนหน้า
		// เรียกใช้งานฟังก์ชั่นสำหรับดึงข้อมูลรุป screenshot 
		runpagespeed(webUrl, mode);
		
		// หากเลยเวลาที่กำหนดนี้ ไม่ว่าจะมีข้อมูลกลับมาหรือไม่ ให้ รีเซ็ต พร้อมรับคำสั่งใหม่
		setTimeout(function(){
			$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
			btn.removeAttr("disabled"); // ปุ่มกดได้อีกคั้ง
		},30000); // 30 วินาที
	});

})
// เรียกใช้งานฟังก์ชั่นสำหรับดึงข้อมูลรุป screenshot ใช้โหมดสำหรับมือถือ
//runpagespeed("https://www.ninenik.com",true);
// ฟังก์ชั่น จับภาพ web screenshot
function runpagespeed(url, mobile){
	const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
	var parameters = {
		url: url
	};  
	if(mobile){
		parameters["strategy"] = "mobile";
	}
	let query = `${api}?`;
	query += $.param(parameters);
	let screenshotData;  
	fetch(query)
	.then(response => response.json())
	.then(json => {
		let lighthouse = json.lighthouseResult;
		screenshotData = lighthouse.audits['final-screenshot']['details'].data;
		let img = $("<img>",{
			src:screenshotData,
			class:"img-fluid"
		});
		$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
		$('[name="btn_screenshot"]').removeAttr("disabled");// ปุ่มกดได้อีกคั้ง
		$(".wrap-show").append(img); // แสดงรูป screenshot
	});	
}
</script>

</body>
</html>

function runpagespeed(url, mobile){
/// โค้ดตัดมาบางส่วน
	let screenshotData;  
	fetch(query)
	.then(response => response.json())
	.then(json => {
		let lighthouse = json.lighthouseResult;
		screenshotData = lighthouse.audits['final-screenshot']['details'].data;
		return screenshotData;
	});	
}

let screenshotData = runpagespeed(webUrl, mode);
console.log(screenshotData); // จะเป็น undefined
if(screenshotData){

}

function myfunc(){ }

async function myfunc(){ }

let returnvalue = await myfunc(); // รอจนกว่าค่าสุดท้ายที่ได้จากฟังก์ชัน myfunc() จะถูกส่งมาแล้วถึงทำงานบรรทัดต่อไป

async function myfunc_2() {
    let returnvalue = await myfunc();
}

$('[name="btn_screenshot"]').on("click", async function(){
	let returnvalue = await myfunc();
});

async function runpagespeed(url, mobile){
/// โค้ดตัดมาบางส่วน
	let screenshotData;  
	let response = await fetch(query);
	let json = await response.json();
	let lighthouse = json.lighthouseResult;
	screenshotData = lighthouse.audits['final-screenshot']['details'].data;
	return screenshotData;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">  
	<title>Document</title>
</head>
<body>

<div class="wrap-form w-50 mx-auto mt-5">
	<div class="input-group mb-3">
	<div class="input-group-prepend">
	  <select class="custom-select" name="view_mode">
		<option value="0">Desktop</option>
		<option value="1">Mobile</option>
	  </select>	  		
	  </div>  
	  <input type="url" class="form-control" name="web_url" value="https://www.pantip.com" placeholder="กรอก url">	  
	  <div class="input-group-append">
		<button class="btn btn-success" type="button" name="btn_screenshot">Get Screenshot</button>
	  </div>
	</div>
</div>
<div class="loading-widget w-50 mx-auto align-items-center d-none">
	<div class="spinner-border text-success mr-2" role="status"></div>
	<strong class="text-success">Loading...</strong>
</div>
<div class="wrap-show w-50 mx-auto">

</div>
<script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
      crossorigin="anonymous"></script>
<script>
$(function(){
	$('[name="btn_screenshot"]').on("click", async function(){
		const btn = $(this); // ปุ่มกด
		const modeSelect = $('[name="view_mode"]').val(); // โหมดที่เลือก
		const webUrl = $('[name="web_url"]').val(); //url เว็บ
		btn.attr("disabled",true);
		var mode = (modeSelect==0)?false:true;
		$(".loading-widget.d-none").toggleClass("d-none d-flex"); // loading ที่ซ่อนให้แสดง
		$(".wrap-show").html(""); // รีเซ้ตข้อมูลรูปที่แสดงก่อนหน้า
		// เรียกใช้งานฟังก์ชั่นสำหรับดึงข้อมูลรุป screenshot 
		let screenshotData = await runpagespeed(webUrl, mode); // รอข้อมูล
		if(screenshotData){ // มีข้อมูล นำมาแสดง
			let img = $("<img>",{
				src:screenshotData,
				class:"img-fluid"
			});
			$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
			$('[name="btn_screenshot"]').removeAttr("disabled");// ปุ่มกดได้อีกคั้ง
			$(".wrap-show").append(img); // แสดงรูป screenshot				
		}
		
		// หากเลยเวลาที่กำหนดนี้ ไม่ว่าจะมีข้อมูลกลับมาหรือไม่ ให้ รีเซ็ต พร้อมรับคำสั่งใหม่
		setTimeout(function(){
			$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
			btn.removeAttr("disabled"); // ปุ่มกดได้อีกคั้ง
		},30000); // 30 วินาที
	});

})
// เรียกใช้งานฟังก์ชั่นสำหรับดึงข้อมูลรุป screenshot ใช้โหมดสำหรับมือถือ
//runpagespeed("https://www.ninenik.com",true);
// ฟังก์ชั่น จับภาพ web screenshot
async function runpagespeed(url, mobile){
	const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
	var parameters = {
		url: url
	};  
	if(mobile){
		parameters["strategy"] = "mobile";
	}
	let query = `${api}?`;
	query += $.param(parameters);
	let screenshotData;  
	let response = await fetch(query);
	let json = await response.json();
	let lighthouse = json.lighthouseResult;
	screenshotData = lighthouse.audits['final-screenshot']['details'].data;
	return screenshotData;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">  
	<title>Document</title>
</head>
<body>

<div class="wrap-form w-50 mx-auto mt-5">
	<div class="input-group mb-3">
	<div class="input-group-prepend">
	  <select class="custom-select" name="view_mode">
		<option value="0">Desktop</option>
		<option value="1">Mobile</option>
		<option value="2">Both</option>
	  </select>	  		
	  </div>  
	  <input type="url" class="form-control" name="web_url" value="https://www.twitter.com" placeholder="กรอก url">	  
	  <div class="input-group-append">
		<button class="btn btn-danger" type="button" name="btn_screenshot">Get Screenshot</button>
	  </div>
	</div>
</div>
<div class="loading-widget w-50 mx-auto align-items-center d-none">
	<div class="spinner-border text-danger mr-2" role="status"></div>
	<strong class="text-danger">Loading...</strong>
</div>
<div class="wrap-show w-50 mx-auto">

</div>
<script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
      crossorigin="anonymous"></script>
<script>
$(function(){
	$('[name="btn_screenshot"]').on("click", async function(){
		const btn = $(this); // ปุ่มกด
		const modeSelect = $('[name="view_mode"]').val(); // โหมดที่เลือก
		const webUrl = $('[name="web_url"]').val(); //url เว็บ
		btn.attr("disabled",true);
		const modeText = ["desktop","mobile","both"];
		var mode = modeText[modeSelect];
		$(".loading-widget.d-none").toggleClass("d-none d-flex"); // loading ที่ซ่อนให้แสดง
		$(".wrap-show").html(""); // รีเซ้ตข้อมูลรูปที่แสดงก่อนหน้า
		
		// รอข้อมูล array รูป screenshot ตามเงื่อนไขที่เลือก
		var webscreenshot = await getscreenshot(webUrl,mode);
		if(webscreenshot){
			webscreenshot.forEach((value) => { // วนลูปแสดงรูป
				var img = $("<img>",{
					src:value,
					class:"img-fluid"
				});
				$('.wrap-show').append(img);
			});		
			$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
			$('[name="btn_screenshot"]').removeAttr("disabled");// ปุ่มกดได้อีกคั้ง				
		}
		
		// หากเลยเวลาที่กำหนดนี้ ไม่ว่าจะมีข้อมูลกลับมาหรือไม่ ให้ รีเซ็ต พร้อมรับคำสั่งใหม่
		setTimeout(function(){
			$(".loading-widget.d-flex").toggleClass("d-none d-flex"); // loading ที่โชว์ให้ซ่อนไป
			btn.removeAttr("disabled"); // ปุ่มกดได้อีกคั้ง
		},60000); // 60 วินาที กรณีนี้ เผื่อไว้ 60 เพราะถ้าดึงสองแบบ จะใช้เวลามากกว่า 30 วินาที
	});

})
// สร้างฟังก์ชั่นเก็บข้อมูล screenshot ไว้ใน array ก่อนคืนค่ากลับไปใช้งาน
async function getscreenshot(url, mode){
	var screenshot = [];
	switch(mode){
		case 'desktop':
			var screenshot1 = await runpagespeed(url, false);
			screenshot.push(screenshot1);
			break;
		case 'mobile':
			var screenshot2 = await runpagespeed(url, true);			
			screenshot.push(screenshot2);
			break;
		case 'both':
			var screenshot1 = await runpagespeed(url, false);
			screenshot.push(screenshot1);
			var screenshot2 = await runpagespeed(url, true);	
			screenshot.push(screenshot2);
			break;			
		default:
			var screenshot1 = await runpagespeed(url, false);
			screenshot.push(screenshot2);
			break;	
	}
	return screenshot;
}
// ฟังก์ชั่น จับภาพ web screenshot
async function runpagespeed(url, mobile){
	const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
	var parameters = {
		url: url
	};  
	if(mobile){
		parameters["strategy"] = "mobile";
	}
	let query = `${api}?`;
	query += $.param(parameters);
	let screenshotData;  
	let response = await fetch(query);
	let json = await response.json();
	let lighthouse = json.lighthouseResult;
	screenshotData = lighthouse.audits['final-screenshot']['details'].data;
	return screenshotData;
}
</script>

</body>
</html>