Si tenemos una página web dinámica en la que analizamos estadísticas de otros sitios web, no estaría de más mostrar al usuario su aspecto actual. Para ello podemos crear una captura de pantalla en remoto y mostrarla en la web para que el usuario sepa cómo luce en este momento. Ese es el primer caso de ejemplo que se me ha venido a la cabeza, pero la función de crear capturas de pantalla de webs sirve para infinidad de casos.
En este artículo vamos a ver una librería gratuita que es capaz de realizar exáctamente eso, capturas a webs. ¿Su nombre? PhantomJS. Hoy con PHP y PhantomJS te enseñaremos cómo llevarlo a cabo. Estate atento...
Instalación
Antes que nada, necesitas configurar PhantomJS en tu variable PATH para que sea fácilmente accesible desde línea de comandos.
Si estás usando Windows 7, puede hacerlo haciendo clic en Mi PC >> Propiedades >> Configuraciones avanzadas >> Variables de entorno, seleccionando path y haciendo clic en editar para añadir la ruta hacia el binario de la librería PhantomJS. Al final quedará algo así:
E:appsphantomjsphantomjs-2.0.0-windowsphantomjs-2.0.0-windowsbin;
Si estás utilizando Windows 8, ve a Inicio >> Todas las aplicaciones >> Panel de control >> Sistema >> Configuraciones avanzadas >> Avanzado >> Variables de entorno y configurarlo desde aquí.
Si estás utilizando otro sistema operativo, por favor busca cómo configurar la variable de entorno PATH para tu OS y añade la carpeta con el archivo binario phantomjs.exe en ella.
Desarrollando el servicio de PhantomJS
En primer lugar, necesitamos el módulo system, ya que tenemos que recibir argumentos en nuestro servicio. Posteriormente, comprobamos si hay argumentos presentes y creamos la captura sólo si hay argumentos (sólo necesitamos uno para esta aplicación)
var system = require("system");
if (system.args.length > 0) {
Después, necesitamos el módulo webpage y crear una captura de pantalla del primer argumento (que esperamos que sea la URL de la página).
pageTitle es sólo el nombre del sitio sin www, http:// y sin ningún tipo de parámetros solicitados. filePath es en donde vamos a almacenar la imagen.
var page = require('webpage').create();
page.open(system.args[1], function() {
var pageTitle = system.args[1].replace(/http.*///g, "").replace("www.", "").split("/")[0]
var filePath = "img/" + pageTitle + '.png';
Finalmente, guardamos la captura en el fichero y mostramos la rura al fichero en nuestra consola (en línea de comandos, claro está)
page.render(filePath);
console.log(filePath);
phantom.exit();
Desarrollando el front y backend de nuestro servicio
En nuestro backend, comprobamos si la petición es de tipo POST y también si se ha pasado una URL a la página. Si es así, se valida si es una URL real y si lo es, usamos exec () para ejecutar el comando `phantomJS site-screenshot.js filePath* y así extraer el nombre del sitio original del mismo.
define("IMAGE_PATH", "img/");
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['url'])) {
$url = filter_var($_POST['url'], FILTER_VALIDATE_URL);
if ($url) {
$filePath = exec('phantomjs site-screenshot.js ' . $url);
$siteName = str_replace(".png", "", str_replace(IMAGE_PATH, "", $filePath));
}
}
Y este sería nuestro frontend.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Screenshot Service</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron col-md-10 col-md-offset-1">
<h1 class="text-center">Ivan's Awesome Screenshot Service</h1>
</div>
<div class="col-md-10 col-md-offset-1">
<form action="" method="POST" class="form-inline">
<label for="url">Enter the site's name and get your screenshot</label>
<input class="form-control" type="url" name="url" id="url"/>
<input type="submit" class="btn btn-lg btn-primary" value="Get Screenshot"/>
</form>
</div>
<?php if (isset($filePath)) : ?>
<div class="col-md-10 col-md-offset-1">
<h2 class="alert alert-success text-center">Your screenshot for <?php echo $siteName; ?></h2>
<a href="<?php echo $filePath; ?>" download="<?php echo $siteName;?>.png">
<img src="<?php echo $filePath; ?>" alt="generated image">
</a>
<p class="lead"><span class="glyphicon glyphicon-info"></span>Click on the image to download it.</p>
</div>
<?php endif; ?>
</div>
</div>
</body>
</html>
Debes saber que solo mostramos la captura si la variable $filePath está presente y sobre todo si hemos puesto en marcha el servicio PhantomJS. Como habrás visto, obligamos al usuario a descargar la imagen al hacer clic sobre ella mediante el atributo de HTML download con el nombre de la imagen siendo en verdad el nombre del sitio.
Fuente: phpgang.com