Capturar pantalla del sitio web desde URL PHP. La captura de pantalla se utiliza para varios propósitos en la aplicación Web, por ejemplo en sistemas de publicidad es requisito mostrar la miniatura de la página que el usuario brinda a la hora de registrar dicha página.
Hay muchas API de terceros en la cual podemos obtener el mismo resultado y están disponibles para tomar una captura de pantalla de cualquier Página Web. Pero si queremos crear nuestro propio estilo, para obtener una captura de pantalla desde la URL, puede hacerlo de manera eficiente usando PHP y la librería de Google PageSpeed Insights API.
En este artículo tocaremos este tema y le daremos solución, sin embargo, usaremos Google PageSpeed Insights API que se utiliza para medir el tiempo de respuesta de una página web. Sin embargo, también se puede utilizar para obtener una captura de pantalla de manera sencilla.
La siguiente secuencia de comandos de ejemplo toma una captura de pantalla del sitio web por la dirección URL y se muestra como una imagen.
Capturar pantalla del sitio web desde URL PHP
Paso #01 Utilizando una clase PHP.
Creamos nuestro código HTML donde contendrá el formulario para enviar el nombre de la página web mediante el método POST.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Capturar pantalla del sitio web desde URL PHP</title>
<style type="text/css">
*{ font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif}
.main{ margin:auto; border:1px solid #7C7A7A; width:40%; text-align:left; padding:30px; background:#85c587}
input[type=submit]{ background:#6ca16e; width:100%;
padding:5px 15px;
background:#ccc;
cursor:pointer;
font-size:16px;
}
input[type=text]{ width:40%;
padding:5px 15px; height:25px;
font-size:16px;
}
</style>
</head>
<body bgcolor="#bed7c0">
<div class="main">
<h1>Capturar pantalla con PHP</h1>
<form action="" method="post">
<p><span>Url sitio web:</span><input type="text" name="site_url" /><span> <br> Ejemplo: http://www.google.com</span></p>
<p><input type="submit" name="enviar" value="Enviar URL" /></p>
</form>
<br>
<?php
if(isset($statusMsg)){
echo $statusMsg."<br>";
echo '<img src="screenshots/'.$file_name.'" width="350">';
}
?>
</div>
</body>
</html>
Paso #02 Script PHP para realizar la captura de pantalla.
Para la comprobación de envió del método post usaremos el ISSET y si no está declarada no realiza ninguna acciona y nos muestra solo el formulario HTML.
<?php
if (isset($_POST["enviar"])){
// Google API key
$googleApiKey = '';
// If URL input is submitted
if(isset($_POST['site_url'])){
$site_url = $_POST['site_url'];
$val_err = '';
if (filter_var($site_url, FILTER_VALIDATE_URL) === false) {
$val_err = 'Please enter a valid website URL.';
}
if(empty($val_err)){
try{
// Call Google PageSpeed Insights API
$googlePagespeedData = file_get_contents("https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site_url&screenshot=true&key=$googleApiKey");
// Decode json data
$googlePagespeedData = json_decode($googlePagespeedData, true);
// Retrieve screenshot image data
$screenshot = $googlePagespeedData['lighthouseResult']['audits']['final-screenshot']['details']['data'];
// Get domain name from site URL
$pieces = parse_url($site_url);
$domain = isset($pieces['host']) ? $pieces['host'] : '';
if(preg_match('/(?P<domain>[a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})$/i', $domain, $regs)){
$domain = $regs['domain'];
}
// Save screenshot as an image
$screenshot_data = $screenshot;
list($type, $screenshot_data) = explode(';', $screenshot_data);
list(, $screenshot_data) = explode(',', $screenshot_data);
$screenshot_data = base64_decode($screenshot_data);
$file_name = !empty($domain)?$domain.'.png':'output.png';
$output_file = 'screenshots/'.$file_name;
file_put_contents($output_file, $screenshot_data);
$statusMsg = 'Screenshot saved as '.$output_file;
}catch(Exception $e){
$statusMsg = $e->getMessage();
}
}else{
$statusMsg = $val_err;
}
}
}
?>
Ya tenemos la respuesta del script que nos muestra la imagen de cualquier pagina web. De una manera sencilla podemos implementar en nuestros sistemas web.
Actualización del script captura de pantalla
Hemos realizado la actualización de este script que ahora utiliza el api de Google. por lo tanto, nos permitirá guardar la captura en nuestro disco y mostrarlo en el navegador a través de una url.
Este script del lado del servidor maneja el proceso de captura de pantalla con la API de Google PageSpeed Insights usando PHP.
Nota:
Es importante obtener la Api para que nuestro script funcione correctamente y podemos visitar esta URL para obtener su api con una cuenta de Google
https://developers.google.com/speed/docs/insights/v5/get-started?hl=es
Una vez ingresado a esa URL podemos gestionar nuestra API
Luego, elegimos y creamos un poryecto en google y obtenemos facilmente nuestra API
Una vez obtenido la api de google podemos agregarlo a nuestro script, en esta sección
// Google API key
$googleApiKey = '';Obtener y guardar capturas de pantalla con PHP
- Valide el valor de entrada para verificar si la URL dada es válida usando el filtro PHP FILTER_VALIDATE_URL.
- Llame a la API de Google PageSpeed Insights y obtenga datos con la función PHP file_get_contents().
- Recupere datos de imagen de captura de pantalla del sitio web usando PHP.
- Obtenga el nombre de dominio de la URL del sitio web y use el dominio como el nombre del archivo de captura de pantalla de salida.
- Guarde los datos de base64 en un archivo y guarde la captura de pantalla como una imagen usando la función PHP file_put_contents().
Código Completo del script en un solo archivo.
Líneas arriba hemos comentado el api de Google es muy importante para poder obtener la captura de pantalla.
<?php
if (isset($_POST["enviar"])){
// Google API key
$googleApiKey = '';
// If URL input is submitted
if(isset($_POST['site_url'])){
$site_url = $_POST['site_url'];
$val_err = '';
if (filter_var($site_url, FILTER_VALIDATE_URL) === false) {
$val_err = 'Please enter a valid website URL.';
}
if(empty($val_err)){
try{
// Call Google PageSpeed Insights API
$googlePagespeedData = file_get_contents("https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site_url&screenshot=true&key=$googleApiKey");
// Decode json data
$googlePagespeedData = json_decode($googlePagespeedData, true);
// Retrieve screenshot image data
$screenshot = $googlePagespeedData['lighthouseResult']['audits']['final-screenshot']['details']['data'];
// Get domain name from site URL
$pieces = parse_url($site_url);
$domain = isset($pieces['host']) ? $pieces['host'] : '';
if(preg_match('/(?P<domain>[a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})$/i', $domain, $regs)){
$domain = $regs['domain'];
}
// Save screenshot as an image
$screenshot_data = $screenshot;
list($type, $screenshot_data) = explode(';', $screenshot_data);
list(, $screenshot_data) = explode(',', $screenshot_data);
$screenshot_data = base64_decode($screenshot_data);
$file_name = !empty($domain)?$domain.'.png':'output.png';
$output_file = 'screenshots/'.$file_name;
file_put_contents($output_file, $screenshot_data);
$statusMsg = 'Screenshot saved as '.$output_file;
}catch(Exception $e){
$statusMsg = $e->getMessage();
}
}else{
$statusMsg = $val_err;
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Capturar pantalla del sitio web desde URL PHP</title>
<style type="text/css">
*{ font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif}
.main{ margin:auto; border:1px solid #7C7A7A; width:40%; text-align:left; padding:30px; background:#85c587}
input[type=submit]{ background:#6ca16e; width:100%;
padding:5px 15px;
background:#ccc;
cursor:pointer;
font-size:16px;
}
input[type=text]{ width:40%;
padding:5px 15px; height:25px;
font-size:16px;
}
</style>
</head>
<body bgcolor="#bed7c0">
<div class="main">
<h1>Capturar pantalla con PHP</h1>
<form action="" method="post">
<p><span>Url sitio web:</span><input type="text" name="site_url" /><span> <br> Ejemplo: http://www.google.com</span></p>
<p><input type="submit" name="enviar" value="Enviar URL" /></p>
</form>
<br>
<?php
if(isset($statusMsg)){
echo $statusMsg."<br>";
echo '<img src="screenshots/'.$file_name.'" width="350">';
}
?>
</div>
</body>
</html>
Descargar código fuente
hola los felicito probe y funciona, saben como darle el tamaño a la imagen ?
Ya lo intenté y no funciona, será por la versión de PHP ? o tal vez no funcione Google PageSpeed Insights API?
Hola
Hemos actualizado el script y ahora funciona muy bien.
Saludos