Capturas de tela do site


407

Existe alguma maneira de tirar uma captura de tela de um site em PHP e salvá-la em um arquivo?


2
Se você gosta de uma queda na solução, dê uma olhada no Usersnap - é um bom serviço que oferece capturas de tela precisas do site. Você só precisa adicionar um pequeno snippet Javascript à sua página para que ela funcione.
— Gregor

1
O Usersnap não pode lidar com páginas da Web que usam o Ajax para gerar o conteúdo como nesta página . Como eu consegui isso? vamos dizer: fazer a captura de tela 10 segundos após o carregamento inicial da página terminado
— rubo77

1
@ rubo77: O Usersnap suporta DOMs dinâmicos, tentei com sua página - a captura de tela reproduz a situação exata, incluindo todas as posições.
— Gregor

Respostas:


280

ÚLTIMA EDIÇÃO : depois de sete anos, ainda estou recebendo votos positivos para esta resposta, mas acho que agora é muito mais precisa.


Claro que você pode, mas precisará renderizar a página com alguma coisa. Se você realmente deseja usar apenas o php, sugiro que o HTMLTOPS , que renderiza a página e a produz em um arquivo ps (ghostscript), converta-o em .jpg, .png, .pdf. Pode ser um pouco mais lento com páginas complexas (e não suportam todo o CSS).

Caso contrário , você pode usar o wkhtmltopdf para gerar uma página html em pdf, jpg, qualquer que seja. Aceite CSS2.0, use o webkit (wrapper do safari) para renderizar a página. Você também deve instalá-lo no seu servidor.

ATUALIZAÇÃO Agora, com o novo recurso HTML5 e JS, também é possível renderizar a página em um objeto de tela usando JavaScript. Aqui está uma boa biblioteca para fazer isso: Html2Canvas e aqui está uma implementação do mesmo autor para obter um feedback como o G +. Depois de renderizar o dom na tela, você poderá enviar para o servidor via ajax e salvá-lo como jpg.

EDIT : Você pode usar a ferramenta imagemagick para transformar pdf em png. Minha versão do wkhtmltopdf não suporta imagens. Por exemplo convert html.pdf -append html.png.

EDIT : Este pequeno script shell fornece um exemplo de uso simples / porém funcional no linux com php5-cli e as ferramentas mencionadas acima.

EDIT : notei agora que a equipe wkhtmltopdf está trabalhando em outro projeto: wkhtmltoimage, que fornece o jpg diretamente


11
+1 para wkhtmltopdf. Eu brinquei com algumas outras bibliotecas, mas nenhuma delas chegou perto de suportar algo além de HTML e CSS muito básicos. O wkhtmltopdf pode fazer tudo o que o Safari faz, então você está bem seguro lá.
— Wim

7
wkhtmltoimage funciona muito bem! Obrigado pela dica. Produz png também.
— yuttadhammo

2
Agora que você menciona KnpLabs wkhtmltopdf tem um wrapper para ele github.com/KnpLabs/snappy
— rmontagud

1
@rmontagud o uso do wkhtmltopdf é bastante fácil, a propósito, um wrapper OOP é sempre bom!
— Strae

1
Todas essas foram ótimas soluções alguns anos atrás, mas a tecnologia de navegadores em que elas se baseiam não se manteve atualizada com as mais recentes especificações de HTML5 / CSS. Se você está prestando um site que faz uso de WebFonts, SVG, lona, flexbox etc, então boa sorte para conseguir uma imagem precisa .. Se você quer screenshots precisos verificar a minha resposta que utiliza urlbox
— cjroebuck

87

Desde o PHP 5.2.2 , é possível capturar um site apenas com o PHP !

imagegrabscreen - captura a tela inteira

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

imagegrabwindow - pega uma janela ou sua área de cliente usando um identificador de janelas (propriedade HWND na instância 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');
?>

Edit: Note, essas funções estão disponíveis apenas nos sistemas Windows!


26
Não é realmente apenas PHP, é?
— Toby Allen

Isso está usando o navegador Internet Explorer para renderizar coisas.
— Keanu_reeves 24/08/19

55

Se você não quiser usar nenhuma ferramenta de terceiros, encontrei uma solução simples que usa a API do Google Page Insight .

Só preciso chamá-lo de API com params screenshot=true.

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

Para a exibição do site para celular, passe &strategy=mobilenos parâmetros,

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

DEMO .


3
Isso é muito legal e também parece funcionar sem fornecer uma chave API. A imagem retornada está quebrada, você precisa substituir todos '_' por '/' e todos '-' por '+' e, em seguida, você pode adicioná-lo como um uri de dados.
— Robert Went

9
Isso é incrível. Tenho codificado isso em gist.github.com/jaseclamp/d4ac6205db352e822ff6
— JaseC

21
Portanto, para referência, a API Page Insight do Google é uma ferramenta de terceiros.
— Jimbo

1
Capturas de tela tem uma resolução limitada a 320x240, é como um polegar
— Gabriele F.

1
Realmente fantástico! Tem algum limite para usá-lo?
— moreirapontocom

19

Você pode usar um navegador sem cabeça simples como o PhantomJS para acessar a página.

Além disso, você pode usar o PhantomJS com PHP.

Confira este pequeno script php que faz isso. Dê uma olhada aqui https://github.com/microweber/screen

E aqui está a API - http://screen.microweber.com/shot.php?url=/programming/757675/website-screenshots-using-php


O PhantomJS geralmente é uma ótima solução para isso, embora quando eu o usei exatamente para esse fim, nem todos os elementos da interface HTML sejam renderizados corretamente.
— precisa saber é o seguinte

2
screen.microweber.com/shot.php?url=https://stackoverflow.com/… agora é um 404 e se pergunta se a resposta aqui deve ser excluída. Nos dois casos, deve ser atualizado.
— Funk Quarenta Niner

18

Isso deve ser bom para você:

https://wkhtmltopdf.org/

Certifique-se de baixar a distribuição wkhtmltoimage!


1
BTW, eu instalei no Ubuntu 10.04 simplesmente usando o apt-get. No entanto, quando eu o executei, era muito, muito lento e o layout do PDF estava torto e não era realmente uma opção viável. No entanto, ele mostra a promessa de usar o KHTML dessa maneira - eventualmente - para geração de imagens.
— Volomike

@Volomike - Você não pode obter melhores resultados do que isso, pois, como você sabe, é usado um navegador compatível com os padrões. Quanto à velocidade, a empresa com a qual trabalho o utilizou repetidamente em diversos projetos que exigem projetos CSS refinados (mas pequenos).
— Christian

Posso garantir a eficácia deste produto. Desenvolvo aplicativos de gráficos para clientes do governo, entregues via html / css, mas que devem ser arquivados como pdf. NENHUM OUTRO produto web-to-pdf chegou quase tão perto de reproduzir perfeitamente nossos gráficos quanto o wkhtmltopdf.
— Daniel Szabo # 03

@ Volomike: a versão no repositório geralmente não é a mais nova; instalar a versão estável mais recente da fonte corrigiu muitas peculiaridades da versão mais antiga para mim.
— Piskvor saiu do prédio

10

Sim. Você precisará de algumas coisas:

Veja khtmld (aemon) em * nx. Veja Url2Jpg para Windows, mas como é o aplicativo dotNet, você também deve usar o Url2Bmp

Ambas são ferramentas de console que você pode utilizar em seu aplicativo da web para obter a captura de tela.

Também existem serviços da web que o oferecem. Veja isso por exemplo.

Editar:

Este link é útil para.


10

Está em Python, mas examinando a documentação e o código, você pode ver exatamente como isso é feito. Se você pode executar python, é uma solução pronta para você:

http://browsershots.org/

Observe que tudo pode ser executado em uma máquina para uma plataforma ou em uma máquina com máquinas virtuais executando as outras plataformas.

De código aberto e gratuito, role até o final da página para obter links para documentação, código fonte e outras informações.


24
Regra 37: Não há exagero. Há apenas 'fogo aberto' e 'tempo para recarregar'.
— Adam Davis

O código-fonte ainda aciona um navegador de desktop para renderização. Não é exatamente seguro para threads e pode estar sujeito a bloqueio.
— Volomike

@ Volomike - É verdade, mas se você precisar ver como é a página quando um navegador a executa, dificilmente haverá uma escolha melhor. Os mecanismos de renderização HTML só vão tão longe com as páginas pesadas de javascript de hoje. Definir permissões de execução e tempos limite apropriados deve limitar as dificuldades e os riscos de executar um programa externo.
— Adam Davis


5

Bem, o PhantomJS é um navegador que pode ser facilmente colocado em um servidor e integrado ao php. Você pode encontrar o código no WDudes. Eles incluíram muito mais recursos, como especificar o tamanho da imagem, cache, fazer o download como um arquivo ou exibir em img src etc.

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

Parâmetros de URL

  • Largura e altura: screenshot.php? Url = google.com & w = 1000 & h = 800

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

  • Desative o cache e carregue screesnhot:
    screenshot.php? Url = google.com.br & cache = 0

  • Para baixar a imagem: screenshot.php? Url = google.com & download = true

Você pode ver o tutorial aqui: Capturar captura de tela de um site usando PHP sem API


ah Me desculpe por isso. Parece que o blog não é mais. Tente github.com/graphcool/chromeless @NarendraVerma
— Varghese

4

O cutycapt salva páginas da web na maioria dos formatos de imagem (jpg, png ..) faça o download no seu synaptic, funciona muito melhor do que o wkhtmltopdf



3

Eu finalmente configurei usando microweber / screen como proposto por @boksiora.
Inicialmente, ao tentar o link mencionado aqui, o que obtive:

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

Estou no Linux. Portanto, se você deseja executá-lo, pode ajustar o meu passo a seguir para o seu ambiente.
Aqui está o passo que fiz no meu shell na DOCUMENT_ROOTpasta:

$ 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

Aponte seu navegador para screen/demo/shot.php?url=google.com. Quando você vê a captura de tela , está pronto. Discussões para configurações mais avançadas estão disponíveis aqui e aqui .


3

Existem muitos projetos de código aberto que podem gerar capturas de tela. Por exemplo, PhantomJS, webkit2png etc

O grande problema desses projetos é que eles são baseados em tecnologias de navegador mais antigas e têm problemas para renderizar muitos sites, especialmente sites que usam fachadas da web, flexbox, svg e várias outras adições às especificações HTML5 e CSS nos últimos dois meses / anos.

Eu tentei alguns dos serviços de terceiros e a maioria é baseada no PhantomJS, o que significa que eles também produzem capturas de tela de baixa qualidade. O melhor serviço de terceiros para gerar capturas de tela de sites é o urlbox.io . É um serviço pago, embora exista uma avaliação gratuita de 7 dias para testá-lo sem comprometer-se com nenhum plano pago.

Aqui está um link para a documentação , e abaixo estão etapas simples para fazê-lo funcionar em PHP com o compositor.

// 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 exemplo, aqui está uma captura de tela em altura total desta página:

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/8f1666d1f4195b1cb84ffa5f992ee18992a2b35e/png?url=http%3A%2F%2Fs2f-75w 2F43652083% 2343652083 & full_page = true

screenshot da página inteira da pergunta stackoverflow.com powered by urlbox.io


3

Há muitas opções e todos têm seus prós e contras. Aqui está uma lista de opções ordenadas por dificuldade de implementação.

Opção 1: use uma API (a mais fácil)

Prós

  • Executar Javascript
  • Renderização quase perfeita
  • Rápido quando as opções de cache são usadas corretamente
  • A escala é tratada pelas APIs
  • Tempo preciso, janela de visualização, ...
  • Na maioria das vezes, eles oferecem um plano gratuito

Contras

  • Não é gratuito se você planeja usá-los muito

Opção 2: use uma das muitas bibliotecas disponíveis

Prós

  • A conversão é bastante rápida na maioria das vezes

Contras

  • Renderização incorreta
  • Não executa javascript
  • Não há suporte para recursos recentes da Web (FlexBox, Seletores avançados, Webfonts, dimensionamento de caixas, consultas de mídia, tags HTML5 ...)
  • Às vezes não é tão fácil de instalar
  • Complicado à escala

Opção 3: use PhantomJs e talvez uma biblioteca de invólucros

Prós

  • Executar Javascript
  • Bem rápido

Contras

  • Renderização incorreta
  • O PhantomJs foi descontinuado e não é mais mantido.
  • Não há suporte para recursos recentes da Web (FlexBox, Seletores avançados, Webfonts, dimensionamento de caixas, consultas de mídia, tags HTML5 ...)
  • Complicado à escala
  • Não é tão fácil fazê-lo funcionar se houver imagens a serem carregadas ...

Opção 4: use o Chrome Headless e talvez uma biblioteca de invólucros

Prós

  • Executar Javascript
  • Renderização quase perfeita

Contras

  • Não é tão fácil obter exatamente o resultado desejado em relação a:
    • tempo de carregamento da página
    • integração de proxy
    • rolagem automática
    • ...
  • Complicado à escala
  • Muito lento e até mais lento se o html contiver links externos

Disclaimer: Eu sou o fundador do ApiFlash. Eu fiz o meu melhor para fornecer uma resposta honesta e útil.


2

Estou no Windows, então pude usar a função imagegrabwindow depois de ler a dica aqui do stephan. Eu adicionei no recorte (para se livrar do cabeçalho do navegador, nas barras de rolagem etc.) e no redimensionamento para obter uma imagem final. Aqui está o meu código . Espero que ajude alguém.


1

O webkit2html funciona no Mac OS X e Linux, é bastante simples de instalar e usar. Veja este tutorial .

No Windows, você pode usar o CutyCapt , que possui uma funcionalidade semelhante.


2
@ Smith: A última vez que verifiquei, o CutyCapt tem todas as dependências do instalador. Sim, você provavelmente não poderá instalá-lo em uma conta limitada, mas é a vida. Observe que todas as outras soluções estão usando algum tipo de wrapper em torno de um núcleo de renderização, então você está no mesmo local que elas.
— Piskvor saiu do prédio em

1

Eu usei bluga . A API permite tirar 100 instantâneos por mês sem pagar, mas às vezes usa mais de 1 crédito para uma única página. Acabei de atualizar um módulo drupal, Bluga WebThumbs para o drupal 7, que permite imprimir uma miniatura em um modelo ou filtro de entrada.

A principal vantagem de usar esta API é que ela permite especificar as dimensões do navegador, caso você use css adaptável, por isso estou usando-a para obter renderizações para o layout para dispositivos móveis e tablets, bem como para o regular.

Existem clientes API para os seguintes idiomas:

PHP , Python , Ruby , Java , .Net C # , Perl e Bash (o shell script requer perl)



1

Você pode usar a solução https://grabz.it .

Ele possui uma API PHP que é muito flexível e pode ser chamada de diferentes maneiras, como em um cronjob ou em uma página da Web PHP.

Para implementá-lo, você precisa primeiro obter uma chave e um segredo do aplicativo e fazer o download o SDK (gratuito).

E um exemplo de implementação. Primeiro de tudo a inicialização:

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");

E exemplo de captura de tela:

// 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");

Em seguida, é possível salvar. Você pode usar um dos dois métodos de salvamento, Savese o identificador de retorno de chamada acessível ao público estiver disponível e, SaveTose não estiver. Verifique a documentação para obter detalhes .


Se você procura capturas de tela em página inteira, esse provedor requer uma assinatura Professional (US $ 170 / ano).
— chaoskreator

1

Outro dia, escrevi um aplicativo rápido e sujo para fazer isso usando a API do Google. Certamente espaço para melhorias ...

  • Ele usa a última versão 5 da API do Google.
  • Tamanho da imagem agora com largura de 500 px
  • Oferece suporte à visualização em computadores e dispositivos móveis
  • Salvar em um arquivo em uma pasta especificada
  • Incorpore um sistema de cache rudimentar

Encontre-o aqui com uma demonstração e código ao vivo .

Não publiquei o código aqui simplesmente porque continuo refinando-o e espero que, quando tiver tempo, converta-o em uma classe adequada.


0

Eu usei o page2images . É desenvolvido com base no cutycapt, que é realmente rápido e estável. Se você não deseja gastar muito tempo com o desempenho e a configuração, deve usá-lo. Se você for ao site deles, poderá encontrar mais detalhes e exemplos de código PHP.


0

Depois de muito navegar na web, encontrei isso.

PPTRAAS > Uma ferramenta gratuita para capturar capturas de tela passando seu URL como parâmetro

Eles oferecem várias opções simplesmente pressionando o URL.

  1. Obter tela inteira

    https://pptraas.com/screenshot?url= {VOCÊ URL AQUI}

  2. Obter captura de tela da página de tamanho específico

    https://pptraas.com/screenshot?url= {VOCÊ URL AQUI} e size = 400.400

  3. Pode-se até converter a página em pdf

    https://pptraas.com/pdf?url= {VOCÊ URL AQUI}


Josh, quando eu carregado a resposta, ele usa para o trabalho bem, eu acho que nós não podemos ser dependentes deste url, por favor, encontrar uma outra alternativa como eles poderiam ter parado o serviço, por enquanto
— Fenil Shah

0

Você poderia fazer 2 coisas.

Use Puppeteer

Você pode usar o pacote PHP Puppeteer para ativar um navegador e tirar uma captura de tela.

Use uma API

Existem muitas APIs de captura de tela. Você pode ver o ScreenshotAPI.net por exemplo. (Isenção de responsabilidade, sou o criador dessa API)


-1

Não diretamente. Softwares como o Selenium têm recursos como este e podem ser controlados pelo PHP, mas têm outras dependências (como executar o servidor baseado em java no computador com o navegador que você deseja capturar).


Agora existem muitas bibliotecas PHP disponíveis para isso. Não é exatamente uma biblioteca 'PHP'. Envolve alguns navegadores e códigos js.
— Gijo Varghese

-1

você pode usar o cutycapt.

O kwhtml está obsoleto e mostra a página como um navegador antigo.


-1

Descobri que esta é a melhor e mais fácil ferramenta: ScreenShotMachine . É um serviço pago, mas você recebe 100 capturas de tela gratuitas e pode comprar outras 2.000 por (cerca de) US $ 20, por isso é um bom negócio. Ele tem um uso muito simples, basta usar um URL, então escrevi este pequeno script para salvar um arquivo com base nele:

<?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!");
?>

Eles têm uma documentação muito boa aqui , então você definitivamente deve dar uma olhada.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.