<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>República I.T. &#187; ImageMagick</title>
	<atom:link href="http://www.republicait.com/tags/imagemagick/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.republicait.com</link>
	<description>Progamación, Tecnología y mucho más...</description>
	<lastBuildDate>Thu, 20 May 2010 20:22:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>¿Cómo tomar el screenshot de una WEB?</title>
		<link>http://www.republicait.com/2009/09/20/tomar-screenshot-web/</link>
		<comments>http://www.republicait.com/2009/09/20/tomar-screenshot-web/#comments</comments>
		<pubDate>Sun, 20 Sep 2009 15:30:44 +0000</pubDate>
		<dc:creator>dcamargo.n</dc:creator>
				<category><![CDATA[Configuración]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Programación]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[ImageMagick]]></category>
		<category><![CDATA[screenshot]]></category>
		<category><![CDATA[website]]></category>
		<category><![CDATA[X11]]></category>
		<category><![CDATA[Xvfb]]></category>

		<guid isPermaLink="false">http://www.republicait.com/?p=264</guid>
		<description><![CDATA[En este post veremos como tomar un screenshot de una página web utilizando la linea de comandos de Linux.]]></description>
			<content:encoded><![CDATA[<h3>Introducción</h3>
<p>En este post veremos como tomar un screenshot de una página web utilizando la linea de comandos de Linux.<br />
Los requerimientos necesarios son:</p>
<ul>
<li>Sistema operativo Linux</li>
<li>Framebuffer Virtual del Servidor X (Xvfb)</li>
<li>Navegador Firefox</li>
<li>ImageMagick</li>
</ul>
<h3>Xvfb</h3>
<p>En el Sistema Windows X, Xvfb es un servidor X11 que realiza todas las operaciones gráficas en memoria sin necesidad de utilizar una pantalla. Con esta herramienta vamos a crear una especie de pantalla virtual para iniciar Firefox en ella y luego tomar el screenshot.</p>
<p>En la siguiente imagen se muestra como installar Xvfb</p>
<div id="attachment_267" class="wp-caption aligncenter" style="width: 592px"><a href="http://www.republicait.com/wp-content/uploads/2009/09/xvfb-install.png"><img class="size-full wp-image-267  " title="xvfb-install" src="http://www.republicait.com/wp-content/uploads/2009/09/xvfb-install.png" alt="Instalando Xvfb" width="582" height="350" /></a><p class="wp-caption-text">Instalando Xvfb</p></div>
<p>Una vez instalado, procedemos a editar el siguiente archivo <code>/etc/dbus-1/system.d/xorg-server.conf</code> para poder arrancar nuesta pantalla virtual</p>
<p>El contenido actual es:</p>
<pre class="brush:xml">&lt;!DOCTYPE busconfig PUBLIC
 "-//freedesktop//DTD D-BUS Bus Configuration 1.0//EN"
 "http://www.freedesktop.org/standards/dbus/1.0/busconfig.dtd"&gt;
&lt;busconfig&gt;
 &lt;policy context="default"&gt;
 &lt;allow own="org.x.config.display0"/&gt;
 &lt;allow send_destination="org.x.config.display0"/&gt;
 &lt;allow send_interface="org.x.config.display0"/&gt;
 &lt;allow own="org.x.config.display1"/&gt;
 &lt;allow send_destination="org.x.config.display1"/&gt;
 &lt;allow send_interface="org.x.config.display1"/&gt;
 &lt;/policy&gt;
&lt;/busconfig&gt;</pre>
<p>Agregamos la pantalla numero 2:</p>
<pre class="brush:xml">&lt;!DOCTYPE busconfig PUBLIC
 "-//freedesktop//DTD D-BUS Bus Configuration 1.0//EN"
 "http://www.freedesktop.org/standards/dbus/1.0/busconfig.dtd"&gt;
&lt;busconfig&gt;
 &lt;policy context="default"&gt;
 &lt;allow own="org.x.config.display0"/&gt;
 &lt;allow send_destination="org.x.config.display0"/&gt;
 &lt;allow send_interface="org.x.config.display0"/&gt;
 &lt;allow own="org.x.config.display1"/&gt;
 &lt;allow send_destination="org.x.config.display1"/&gt;
 &lt;allow send_interface="org.x.config.display1"/&gt;
 &lt;allow own="org.x.config.display2"/&gt;
 &lt;allow send_destination="org.x.config.display2"/&gt;
 &lt;allow send_interface="org.x.config.display2"/&gt;
 &lt;/policy&gt;
&lt;/busconfig&gt;</pre>
<p>Ahora el siguiente paso es iniciar nuestra pantalla virtual, ejecutamos el siguiente commando:</p>
<p><code>$ Xvfb :2 -ac -screen :0 1024x768x24 2&gt;&amp;1 &gt; /dev/null &amp;</code></p>
<p>Esto nos debe iniciar nuestro servicio de Xvfb, para verificar que se esta ejecutando ejecutamos el siguiente comando:</p>
<p><code>$ ps auxx | grep Xvfb</code></p>
<h3>Firefox</h3>
<p>El siguiente paso ahora es iniciar Firefox en nuestra pantalla virtual y como parametro le pasamos la URL que debe cargar</p>
<p><code>$ firefox --display=:2 http://www.google.com -silent -nosplash -fullscreen 2&gt;&amp;1 &gt; /dev/null &amp;</code></p>
<p>Verificamos si en efecto se creo el proceso:</p>
<p><code>$ ps auxx | grep firefox</code></p>
<p>Luego procedemos a tomar el screenshot con el siguiente comando:</p>
<p><code>$ xwd -root -out -display :2 screen.xwd</code></p>
<h3>ImageMagick</h3>
<p>ImageMagick es una herramienta para manipular imagenes mediante linea de comandos.</p>
<p>Procedemos a installar ImageMagick</p>
<div id="attachment_272" class="wp-caption aligncenter" style="width: 602px"><a href="http://www.republicait.com/wp-content/uploads/2009/09/install-imagemagick.png"><img class="size-full wp-image-272 " title="install-imagemagick" src="http://www.republicait.com/wp-content/uploads/2009/09/install-imagemagick.png" alt="Instalando ImageMagick" width="592" height="367" /></a><p class="wp-caption-text">Instalando ImageMagick</p></div>
<p>Luego convertimos la imagen capturada a otro formato, como PNG por ejemplo.</p>
<p><code>$ convert screen.xwd screen.png</code></p>
<p>Resultado Final:</p>
<p style="text-align: center;">
<div id="attachment_279" class="wp-caption aligncenter" style="width: 594px"><a href="http://www.republicait.com/wp-content/uploads/2009/09/screen.png"><img class="size-full wp-image-279  " title="screen" src="http://www.republicait.com/wp-content/uploads/2009/09/screen.png" alt="Resultado del Screenshot" width="584" height="328" /></a><p class="wp-caption-text">Resultado del Screenshot</p></div>
<p>Para finalizar, hay que cerrar los procesos de firefox y Xvfb</p>
<p><code>$ kill `pidof firefox`</code></p>
<p><code>$ kill `pidof Xvfb`</code></p>
<h3>Script Completo</h3>
<p>A continuación un pequeño script con el código para tomar el screenshot, como parámetro se le pasa la URL:</p>
<pre class="brush:shell">DISPLAY_NUMBER=:2
Xvfb $DISPLAY_NUMBER -ac -screen :0 1024x768x24 2&gt;&amp;1 &gt; /dev/null &amp;
sleep 10
firefox --display=$DISPLAY_NUMBER $1 -silent -nosplash -fullscreen 2&gt;&amp;1 &gt; /dev/null &amp;
sleep 10
xwd -root -out -display $DISPLAY_NUMBER screen.xwd
convert screen.xwd screen.png
rm screen.xwd
kill `pidof firefox`
kill `pidof Xvbf`
echo "[DONE]"</pre>
<p>Para ejecutarlo:</p>
<p><code>$ ./take-screenshot http://www.google.com</code></p>
<h3>Notas Finales</h3>
<p>Como firefox se esta ejecutando en una pantalla virtual y no lo estamos cerrando de forma correcta (matando el proceso), es necesario eliminar el archivo que pide la restauracion de firefox.</p>
<p><code>$ rm /home/{USER_HOME}/.mozilla/firefox/{PROFILE_NAME}.default/sessionstore.js</code></p>
<p>Donde <code>{USER_HOME}</code> es el usuario donde se esta ejecutando firefox y <code>{PROFILE_NAME}</code> es el nombre del profile que se creo cuando se ejecuto firefox.</p>
Términos de búsqueda<ul><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="screenshot javascript">screenshot javascript</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="graficar en linux con xorg xvfb">graficar en linux con xorg xvfb</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="script firefox tomar foto">script firefox tomar foto</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="script para tomas foto de pantalla firefox">script para tomas foto de pantalla firefox</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar pantallazos con javascript">tomar pantallazos con javascript</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar Screen completo de web">tomar Screen completo de web</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar screen de web">tomar screen de web</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar screen en javascript">tomar screen en javascript</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar screenshots con mozilla firefox">tomar screenshots con mozilla firefox</a></li><li><a href="http://www.republicait.com/2009/09/20/tomar-screenshot-web/" title="tomar screenshots en mozilla">tomar screenshots en mozilla</a></li></ul><!-- SEO SearchTerms Tagging 2 plugin took 3.412 ms -->]]></content:encoded>
			<wfw:commentRss>http://www.republicait.com/2009/09/20/tomar-screenshot-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
