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.