Capturas de pantalla del sitio web

407

¿Hay alguna forma de tomar una captura de pantalla de un sitio web en PHP y luego guardarlo en un archivo?

Paolo Forgia
fuente
2
Si le gusta una solución directa , eche un vistazo a Usersnap : es un buen servicio que ofrece capturas de pantalla precisas del sitio web. Solo tiene que agregar un pequeño fragmento de Javascript a su página para que funcione.
Gregor
1
Los usuarios no pueden hacer frente a las páginas web que usan Ajax para generar el contenido como en esta página . ¿Cómo podría lograr eso? digamos: haga la captura de pantalla 10 segundos después de que finalice la carga inicial de la página
rubo77
1
@ rubo77: Usersnap admite tales DOM dinámicos, lo he intentado con su página: la captura de pantalla reproduce la situación exacta, incluidas todas las posiciones.
Gregor

Respuestas:

280

ÚLTIMA EDICIÓN : después de 7 años todavía estoy recibiendo votos positivos para esta respuesta, pero supongo que esta es ahora mucho más precisa.


Claro que puedes, pero necesitarás renderizar la página con algo. Si realmente desea usar solo php, le sugiero HTMLTOPS , que representa la página y la muestra en un archivo ps (ghostscript), luego, conviértalo en un .jpg, .png, .pdf ... puede ser un poco más lento con páginas complejas (y no admiten todo el CSS).

De lo contrario, puede usar wkhtmltopdf para generar una página html en pdf, jpg, lo que sea ... Acepte CSS2.0, use el webkit (envoltorio de safari) para renderizar la página ... así que debería estar bien. También debes instalarlo en tu servidor.

ACTUALIZAR Ahora, con la nueva característica HTML5 y JS, también es posible renderizar la página en un objeto de lienzo usando JavaScript. Aquí una buena biblioteca para hacer eso: Html2Canvas y aquí hay una implementación del mismo autor para obtener comentarios como G +. Una vez que haya procesado el dom en el lienzo, puede enviarlo al servidor a través de ajax y guardarlo como jpg.

EDITAR : puede usar la herramienta imagemagick para transformar pdf a png. Mi versión de wkhtmltopdf no admite imágenes. Por ej convert html.pdf -append html.png.

EDITAR : Este pequeño script de shell ofrece un ejemplo de uso simple pero funcional en Linux con php5-cli y las herramientas mencionadas anteriormente.

EDITAR : ahora me di cuenta de que el equipo de wkhtmltopdf está trabajando en otro proyecto: wkhtmltoimage, que le da el jpg directamente

Strae
fuente
11
+1 para wkhtmltopdf. He jugado con algunas otras bibliotecas, pero ninguna de ellas estuvo cerca de admitir nada más que HTML y CSS muy básicos. wkhtmltopdf puede hacer todo lo que hace Safari, por lo que estás bastante seguro allí.
Wim
77
¡wkhtmltoimage funciona muy bien! Gracias por el consejo. Salidas png también.
yuttadhammo
2
Ahora mencionas que wkhtmltopdf KnpLabs tiene un contenedor para ello github.com/KnpLabs/snappy
rmontagud
1
@rmontagud el uso de wkhtmltopdf es bastante fácil, ¡por cierto, un contenedor OOP siempre es bueno!
Strae
1
Estas fueron todas excelentes soluciones hace unos años, pero la tecnología del navegador en la que se basan no se ha actualizado con las últimas especificaciones HTML5 / CSS. Si está renderizando un sitio que hace uso de webfonts, svg, canvas, flexbox, etc. Buena suerte obteniendo una captura de pantalla precisa. Si desea capturas de pantalla precisas, consulte mi respuesta que usa urlbox
cjroebuck
87

¡Desde PHP 5.2.2 es posible capturar un sitio web con PHP únicamente !

imagegrabscreen : captura toda la pantalla

<?php
$img = imagegrabscreen();
imagepng($img, 'screenshot.png');
?>

imagegrabwindow : toma una ventana o su área de cliente utilizando un identificador de ventanas (propiedad HWND en la instancia COM)

<?php
$Browser = new COM('InternetExplorer.Application');
$Browserhandle = $Browser->HWND;
$Browser->Visible = true;
$Browser->Fullscreen = true;
$Browser->Navigate('http://www.stackoverflow.com');

while($Browser->Busy){
  com_message_pump(4000);
}

$img = imagegrabwindow($Browserhandle, 0);
$Browser->Quit();
imagepng($img, 'screenshot.png');
?>

Editar: ¡ Tenga en cuenta que estas funciones están disponibles SOLO en sistemas Windows!

stephan
fuente
26
¿No es realmente solo PHP?
Toby Allen
Esto está usando el navegador Internet Explorer para renderizar cosas.
keanu_reeves
55

Si no desea utilizar herramientas de terceros, he encontrado una solución simple que está utilizando la API de Google Page Insight .

Solo necesito llamarlo es api con params screenshot=true.

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=https://stackoverflow.com/&key={your_api_key}&screenshot=true

Para la vista de sitio móvil pase &strategy=mobileen parámetros,

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=http://stackoverflow.com/&key={your_api_key}&screenshot=true&strategy=mobile

DEMO .

Rikesh
fuente
3
Esto es bastante bueno y también parece funcionar sin proporcionar una clave de API. Sin embargo, la imagen devuelta está rota, debe reemplazar todo '_' con '/' y todo '-' con '+' y luego puede agregarlo como uri de datos
Robert Went
99
Esto es asombroso He codificado esto en gist.github.com/jaseclamp/d4ac6205db352e822ff6
JaseC
21
Entonces, como referencia, la API de Page Insight de Google es una herramienta de terceros.
Jimbo
1
captura de pantalla tiene una resolución limitada a 320x240, es como un pulgar
Gabriele F.
1
¡Realmente asombroso! ¿Tiene algún límite para usarlo?
moreirapontocom
19

Puede usar un navegador simple sin cabeza como PhantomJS para capturar la página.

También puedes usar PhantomJS con PHP.

Echa un vistazo a este pequeño script PHP que hace esto. Echa un vistazo aquí https://github.com/microweber/screen

Y aquí está la API- http://screen.microweber.com/shot.php?url=/programming/757675/website-screenshots-using-php

boksiora
fuente
PhantomJS es generalmente una gran solución para esto, aunque cuando lo usé exactamente para este propósito, no todos los elementos de la interfaz HTML se representaron correctamente.
ultrageek
2
screen.microweber.com/shot.php?url=https://stackoverflow.com/… ahora es un 404 y se pregunta si la respuesta aquí debería eliminarse. En cualquier caso, debe actualizarse.
Funk Forty Niner
18

Esto debería ser bueno para ti:

https://wkhtmltopdf.org/

¡Asegúrese de descargar la distribución wkhtmltoimage!

cristiano
fuente
1
Por cierto, lo instalé en Ubuntu 10.04 simplemente usando apt-get. Sin embargo, cuando lo ejecuté, era muy, muy lento y el diseño del PDF estaba torcido y no era realmente una opción viable. Sin embargo, parece prometedor usar KHTML de esta manera, eventualmente, para la generación de imágenes.
Volomike
@Volomike: no puede obtener mejores resultados que esto ya que, como sabe, se utiliza un navegador que cumple con los estándares. En cuanto a la velocidad, la compañía con la que trabajo lo ha usado repetidamente en proyectos misceláneos que requieren proyectos CSS específicos (pero pequeños).
Christian
Puedo dar fe de la eficacia de este producto. Desarrollo aplicaciones de gráficos para clientes gubernamentales que se entregan a través de html / css pero que deben archivarse como archivos PDF. NINGÚN OTRO producto de web a pdf estuvo tan cerca de reproducir perfectamente nuestros gráficos como wkhtmltopdf.
Daniel Szabo
@Volomike: la versión en el repositorio generalmente no es la más nueva; La instalación de la versión estable más nueva desde el origen solucionó muchas peculiaridades de la versión anterior para mí.
Piskvor salió del edificio el
10

Si. Necesitarás algunas cosas aunque:

Ver khtmld (aemon) en * nx. Consulte Url2Jpg para Windows, pero como es la aplicación dotNet, también debe consultar Url2Bmp

Ambas son herramientas de consola que puede utilizar desde su aplicación web para obtener la captura de pantalla.

También hay servicios web que lo ofrecen. Mira esto por ejemplo.

Editar:

Este enlace es útil para.

majkinetor
fuente
10

Está en Python, pero repasando la documentación y el código puede ver exactamente cómo se hace. Si puede ejecutar python, entonces es una solución preparada para usted:

http://browsershots.org/

Tenga en cuenta que todo puede ejecutarse en una máquina para una plataforma, o una máquina con máquinas virtuales que ejecutan las otras plataformas.

Gratis, de código abierto, desplácese hasta la parte inferior de la página para obtener enlaces a la documentación, el código fuente y otra información.

Adam Davis
fuente
24
Regla 37: no hay exageración. Solo hay 'fuego abierto' y 'tiempo para recargar'.
Adam Davis
El código fuente aún enciende un navegador de escritorio para renderizar. No es exactamente seguro para subprocesos y puede ser propenso a bloquearse.
Volomike
@Volomike: es cierto, pero si necesita ver cómo se ve la página cuando la ejecuta un navegador, casi no hay mejor opción. Los motores de renderizado HTML solo llegan hasta ahora con las pesadas páginas javascript de hoy. Establecer permisos de ejecución y tiempos de espera apropiados debería limitar las dificultades y los riesgos de ejecutar un programa externo.
Adam Davis
5

Bueno, PhantomJS es un navegador que se puede poner fácilmente en un servidor e integrarlo en php. Puede encontrar el código en WDudes. Han incluido muchas más funciones, como especificar el tamaño de la imagen, el caché, descargar como archivo o mostrar en img src, etc.

<img src=”screenshot.php?url=google.com” />

Parámetros de URL

  • Ancho y alto: screenshot.php? Url = google.com & w = 1000 & h = 800

  • Con recorte: screenshot.php? Url = google.com & w = 1000 & h = 800 & clipw = 800 & cliph = 600

  • Deshabilite el caché y cargue un nuevo screesnhot:
    screenshot.php? Url = google.com & cache = 0

  • Para descargar la imagen: screenshot.php? Url = google.com & download = true

Puedes ver el tutorial aquí: Captura de pantalla de un sitio web usando PHP sin API

Gijo Varghese
fuente
Oh. Lo siento por eso. Parece que el blog ya no está. Pruebe github.com/graphcool/chromeless @NarendraVerma
Gijo Varghese el
4

cutycapt guarda páginas web en la mayoría de los formatos de imagen (jpg, png ..) descárguelo de su sináptica, funciona mucho mejor que wkhtmltopdf

Wolfgang
fuente
3

Finalmente lo configuré usando microweber / screen como lo propuso @boksiora.
Inicialmente cuando probé el enlace mencionado aquí, lo que obtuve:

Please download this script from here https://github.com/microweber/screen

Estoy en Linux Entonces, si desea ejecutarlo, puede ajustar mi paso a su entorno.
Aquí están los pasos que hice en mi shell en la DOCUMENT_ROOTcarpeta:

$ sudo wget https://github.com/microweber/screen/archive/master.zip
$ sudo unzip master.zip
$ sudo mv screen-master screen
$ sudo chmod +x screen/bin/phantomjs
$ sudo yum install fontconfig
$ sudo yum install freetype*
$ cd screen
$ sudo curl -sS https://getcomposer.org/installer | php
$ sudo php composer.phar update
$ cd ..
$ sudo chown -R apache screen
$ sudo chgrp -R www screen
$ sudo service httpd restart

Apunte su navegador a screen/demo/shot.php?url=google.com. Cuando vea la captura de pantalla , habrá terminado. La discusión para una configuración más avanzada está disponible aquí y aquí .

Chetabahana
fuente
3

Hay muchos proyectos de código abierto que pueden generar capturas de pantalla. Por ejemplo PhantomJS, webkit2png, etc.

El gran problema con estos proyectos es que se basan en tecnología de navegador más antigua y tienen problemas para representar muchos sitios, especialmente sitios que usan fuentes web, flexbox, svg y varias otras adiciones a las especificaciones HTML5 y CSS en los últimos meses / años.

He probado algunos de los servicios de terceros, y la mayoría se basan en PhantomJS, lo que significa que también producen capturas de pantalla de baja calidad. El mejor servicio de terceros para generar capturas de pantalla del sitio web es urlbox.io . Es un servicio pago, aunque hay una prueba gratuita de 7 días para probarlo sin comprometerse con ningún plan pago.

Aquí hay un enlace a la documentación , y a continuación hay pasos simples para que funcione en PHP con Composer.

// 1 . Get the urlbox/screenshots composer package (on command line):
composer require urlbox/screenshots

// 2. Set up the composer package with Urlbox API credentials:
$urlbox = UrlboxRenderer::fromCredentials('API_KEY', 'API_SECRET');

// 3. Set your options (all options such as full page/full height screenshots, retina resolution, viewport dimensions, thumbnail width etc can be set here. See the docs for more.)
$options['url'] = 'example.com';

// 4. Generate the Urlbox url
$urlboxUrl = $urlbox->generateUrl($options);
// $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'

// 5. Now stick it in an img tag, when the image is loaded in browser, the API call to urlbox will be triggered and a nice PNG screenshot will be generated!
<img src="$urlboxUrl" />

Por ejemplo, aquí hay una captura de pantalla de altura completa de esta misma página:

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/8f1666d1f4195b1cb84ffa5f992ee18992a2b35e/png?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F757675%2Fwebsite-screenshots-using-php% 2F43652083% 2343652083 & full_page = true

Captura de pantalla de la página completa de la pregunta stackoverflow.com con tecnología de urlbox.io

cjroebuck
fuente
3

Hay muchas opciones y todas tienen sus ventajas y desventajas. Aquí hay una lista de opciones ordenadas por dificultad de implementación.

Opción 1: usar una API (la más fácil)

Pros

  • Ejecutar Javascript
  • Representación casi perfecta
  • Rápido cuando las opciones de almacenamiento en caché se usan correctamente
  • La escala es manejada por las API
  • Tiempo preciso, ventana gráfica, ...
  • La mayoría de las veces ofrecen un plan gratuito.

Contras

  • No es gratis si planeas usarlos mucho

Opción 2: use una de las muchas bibliotecas disponibles

Pros

  • La conversión es bastante rápida la mayor parte del tiempo

Contras

  • Mala representación
  • No ejecuta javascript
  • No admite funciones web recientes (FlexBox, Selectores avanzados, Fuentes web, Tamaño de cuadro, Consultas de medios, etiquetas HTML5 ...)
  • A veces no es tan fácil de instalar
  • Complicado a escala

Opción 3: usar PhantomJs y tal vez una biblioteca de contenedor

Pros

  • Ejecutar Javascript
  • Bastante rapido

Contras

  • Mala representación
  • PhantomJs ha quedado en desuso y ya no se mantiene.
  • No admite funciones web recientes (FlexBox, Selectores avanzados, Fuentes web, Tamaño de cuadro, Consultas de medios, etiquetas HTML5 ...)
  • Complicado a escala
  • No es tan fácil hacerlo funcionar si hay imágenes para cargar ...

Opción 4: use Chrome Headless y tal vez una biblioteca de contenedor

Pros

  • Ejecutar Javascript
  • Representación casi perfecta

Contras

  • No es tan fácil tener exactamente el resultado deseado con respecto a:
    • tiempo de carga de la página
    • integración proxy
    • desplazamiento automático
    • ...
  • Complicado a escala
  • Bastante lento e incluso más lento si el html contiene enlaces externos

Descargo de responsabilidad: soy el fundador de ApiFlash. Hice mi mejor esfuerzo para proporcionar una respuesta honesta y útil.

Timothée Jeannin
fuente
2

Estoy en Windows, así que pude usar la función imagegrabwindow después de leer el consejo aquí de stephan. Agregué recortar (para eliminar el encabezado del navegador, las barras de desplazamiento, etc.) y cambiar el tamaño para obtener una imagen final. Aquí está mi código . Espero que ayude a alguien.

Robert James Reese
fuente
1

webkit2html funciona en Mac OS X y Linux, es bastante simple de instalar y usar. Mira este tutorial .

Para Windows, puede usar CutyCapt , que tiene una funcionalidad similar.

Piskvor salió del edificio
fuente
2
@ Smith: La última vez que lo verifiqué, CutyCapt tiene todas las dependencias en el instalador. Sí, probablemente no podrá instalar esto bajo una cuenta limitada, pero así es la vida. Tenga en cuenta que todas las demás soluciones están utilizando algún tipo de envoltorio alrededor de un núcleo de representación, por lo que está en el mismo lugar con ellas.
Piskvor salió del edificio el
1

Yo solía bluga . La API le permite tomar 100 instantáneas al mes sin pagar, pero a veces utiliza más de 1 crédito para una sola página. Acabo de terminar de actualizar un módulo de drupal, Bluga WebThumbs a drupal 7, que le permite imprimir una miniatura en una plantilla o filtro de entrada.

La principal ventaja de usar esta API es que le permite especificar las dimensiones del navegador en caso de que use CSS adaptable, por lo que lo estoy usando para obtener representaciones para el diseño móvil y de la tableta, así como para el habitual.

Hay clientes api para los siguientes idiomas:

PHP , Python , Ruby , Java , .Net C # , Perl y Bash (el script de shell parece que requiere perl)

Arosboro
fuente
1

Puede usar la solución https://grabz.it .

Tiene una API PHP que es muy flexible y se puede llamar de diferentes maneras, como desde un cronjob o una página web PHP.

Para implementarlo, primero deberá obtener una clave y un secreto de la aplicación y descargar el SDK (gratuito).

Y un ejemplo de implementación. Primero de todo inicialización:

include("GrabzItClient.class.php");

// Create the GrabzItClient class
// Replace "APPLICATION KEY", "APPLICATION SECRET" with the values from your account!
$grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

Y ejemplo de captura de pantalla:

// To take a image screenshot
$grabzIt->URLToImage("http://www.google.com");  
// Or to take a PDF screenshot
$grabzIt->URLToPDF("http://www.google.com");
// Or to convert online videos into animated GIF's
$grabzIt->URLToAnimation("http://www.example.com/video.avi");
// Or to capture table(s)
$grabzIt->URLToTable("http://www.google.com");

El siguiente es el ahorro. Puede usar uno de los dos métodos de guardado, Savesi el controlador de devolución de llamada de acceso público está disponible y SaveTosi no. Consulte la documentación para más detalles .

Johnny
fuente
Si está buscando capturas de pantalla de página completa, este proveedor requiere una suscripción profesional ($ 170 / año).
chaoskreator
1

Escribí una aplicación rápida y sucia el otro día para hacer esto usando la API de Google. Sin duda, posibilidades de mejora ...

  • Utiliza la última API de Google ver 5.
  • Tamaño de imagen ahora 500px de ancho
  • Admite escritorio y vista móvil
  • Guardar en un archivo en una carpeta especificada
  • Incorporar un sistema de caché rudimentario

Encuéntrelo aquí con una demostración en vivo y un código .

No publiqué el código aquí simplemente porque sigo refinándolo y con suerte, cuando tenga tiempo, conviértalo en una clase adecuada.

Fred
fuente
0

Solía page2images . Está desarrollado en base al cutycapt que es realmente rápido y estable. Si no desea pasar demasiado tiempo en el rendimiento y la configuración, debe usarlo. Si va a su sitio web, puede encontrar más detalles y ejemplos de código PHP.

Chen
fuente
0

Después de mucho navegar en la web, encontré esto.

PPTRAAS > Una herramienta gratuita para capturar capturas de pantalla pasando su URL como parámetro

Proporcionan múltiples opciones simplemente presionando su URL.

  1. Obtener captura de pantalla de página completa

    https://pptraas.com/screenshot?url= {USTED URL AQUÍ}

  2. Obtener captura de pantalla de página de tamaño específico

    https://pptraas.com/screenshot?url= {YOU URL AQUÍ} & size = 400,400

  3. Incluso se puede convertir la página a pdf

    https://pptraas.com/pdf?url= {USTED URL AQUÍ}

Fenil Shah
fuente
Josh, cuando cargué la respuesta, solía funcionar bien, supongo que no podemos depender de esta url, por favor encuentre otra alternativa ya que podrían haber detenido el servicio por ahora
Fenil Shah
0

Podrías hacer 2 cosas.

Usar titiritero

Puede usar el paquete PHP Puppeteer para activar un navegador y tomar una captura de pantalla.

Use una API

Hay muchas API de captura de pantalla. Podrías mirar ScreenshotAPI.net por ejemplo. (Descargo de responsabilidad Soy el creador de esa API)

Dirk Hoekstra
fuente
-1

No directamente. El software como Selenium tiene características como esta y puede ser controlado por PHP, pero tiene otras dependencias (como ejecutar su servidor basado en Java en la computadora con el navegador que desea capturar)

Macha
fuente
Ahora hay muchas bibliotecas PHP disponibles para ello. No es exactamente una biblioteca 'PHP'. Implica algunos navegadores y códigos js.
Gijo Varghese
-1

puedes usar cutycapt.

kwhtml está en desuso y muestra la página como un navegador antiguo.

mohammad inanloo
fuente
-1

He encontrado que esta es la mejor y más fácil herramienta: ScreenShotMachine . Es un servicio pago, pero obtienes 100 capturas de pantalla gratis y puedes comprar otras 2,000 por (aproximadamente) $ 20, por lo que es un buen negocio. Tiene un uso muy simple, solo usa una URL, así que escribí este pequeño script para guardar un archivo basado en él:

<?php
  $url = file_get_contents("http://api.screenshotmachine.com/?key={mykey}&url=https://stackoverflow.com&size=X");

  $file = fopen("snapshots/stack.jpg", "w+");
  fwrite($file, $url);
  fclose($file);
  die("saved file!");
?>

Tienen una muy buena documentación aquí , por lo que definitivamente deberías echar un vistazo.

Yaakov Ainspan
fuente