Screenshoots dinamicos

[danneg]

Hola amigos!

hace mucho tiempo que no me paraba por aquí, pero ahora vengo un una duda.

Estoy diseñando mi portafolio, y dentro de el obviamente quiero mostrar imágenes de los sitios que he hecho, no me molestaría meter las imágenes manualmente pero preferiría que las imágenes se generaran solas al ingresar la dirección url de tal sitio.

He encontrado algunas alternativas gratuitas por la web, pero todas son de muy mala calidad, poco personalizables y algunas lanzan mi sugerencia para descargar un navegador optimo (osea que utilizan IE como motor o algo así ¬¬).

Me gustaría saber si ustedes conocen un servicio económico o en el mejor de los casos gratuito para hacer este tipo de cosas.

Ahora, si alguno de ustedes sabe como programar uno, me gustaría mejor que me proporcionaran un tutorial (ya he visto que esto no se puede con las librerías GD de php >.< )... no importa el lenguaje de programación, solo que pueda correr en una plataforma ubuntu.

De antemano muchas gracias

[dual3nigma]

Te recomiendo http://aezell.wordpress.com/2009/02/...qt-and-webkit/

[danneg]

Como ya es costumbre de fwd, nadie puede resolver mis preguntas, y como ya es costumbre he encontrado solo la solución.

En fin, para aquellos que buscan de este tipo de cosas quiero compartir la solución.

La solución fue más sencilla de lo que esperaba, fue gracias a un script llamado webkit2png, el cual pueden descargar desde http://dannegm.com/webkit2png.py

Como verán esta programado en python, un lenguaje muy sencillo de comprender, pero para que funcione necesitan tener algunas librerias instaladas, así que desde la consola tipeen esto:

Código Consola:

sudo apt-get install libqt4-core libqt4-webkit python-qt4 xvfb
 

Eso resuelve el problema de las librerias. Despues de tener las librerias instaladas y el script en un lugar donde recuerden, solo falta ejecutar el script con esta linea de comando.

Código Consola:

python webkit2png.py -x -o [B]/path/to/shot.png[/B] –-debug [B]http://tusitio.com[/B] --geometry [B]width height[/B]
 

Y al instante tendrán una imagen png en excelente calidad en la dirección que ingresaron, y lo mejor, se ve igual que como se vería en un navegador webkit :D

Es sencillo no?... pues el resto les toca hacerlo a ustedes, utilicen su imaginación-

[danneg]

hahah @dual3nigma ... ese fue el que te recomende yo XD ...

Pero sí, esa fue mi fuente :)

http://aezell.wordpress.com/2009/02/...qt-and-webkit/

[danneg]

Experimentando con esta librería, he creado esta miniaplicación.
http://dannegm.com/shot.php

He encontrado que tiene algunas deficiencias, por ejemplo, no captura las sombras y algunas medidas no las respeta; hay muchos bugs los cuales estaré documentando próximamente, de mientras les dejo el código de la aplicación.

-----------------------------
Datos técnicos:

Como estoy utilizando un vps (lo mejor que he probado :D) pues he tenido que configurar bastantes cosas, entre una de ellas necesito que el directorio donde guardare las imágenes generadas tenga permisos de escritura, esto lo puedes hacer con el ftp dandole permisos 777 o desde la consola utilizando el siguiente comando:

Código consola:

tu@consola$ sudo chmod 777 /path/to/pics
 

Una vez que tu directorio tenga permisos pues simplemente ejecuta la aplicación

Código PHP:

<?php
 
function genKey (){
    $rCh = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    $key = "";
    for ( $i = 0; $i < 8; $i++ ){
        $key .= $rCh{ rand(0,61) };
    }
    return $key;
}
 
$url = isset($_GET['u']) ? $_GET['u'] : false;
 
if ( !$url ):
?>
 
<form action="#" method="get">
    <label>
        http://
    </label>
    <input name="u" />
    <button>Shot!</button>
</form>
 
<?php
else:
    $key = genKey();
    exec('cd public_html');
    $cmd = 'python webkit2png.py -x -o shots/' . $key . '.png --debug http://' . $url . ' --geometry 1024 600';
    $output = '';
    $exec = exec($cmd, $output);
    if ( !$exec ):
        echo $cmd;
        echo '<br /><br />';
        for ($i = 0; $i < count($output); $i++){
            echo $output[$i] . '<br />';
        }
        echo '<br />Estas feo y no se puedo porcesar imagen';
    else:
        echo $cmd;
        echo '<br /><br />';
        for ($i = 0; $i < count($output); $i++){
            echo $output[$i] . '<br />';
        }
        echo '<br /><img src="shots/' . $key . '.png" />';
    endif;
endif;
?>