Zrzuty ekranu z witryny


407

Czy istnieje sposób zrobienia zrzutu ekranu strony internetowej w PHP, a następnie zapisania go do pliku?


2
Jeśli podoba Ci się rozwiązanie, spójrz na Usersnap - to fajna usługa oferująca dokładne zrzuty ekranu z witryny. Musisz tylko dodać mały fragment kodu JavaScript do swojej strony, aby działał.
Gregor,

1
Użytkownicy nie radzą sobie ze stronami internetowymi, które wykorzystują Ajax do generowania treści jak na tej stronie . Jak mogłem to osiągnąć? powiedzmy: wykonaj zrzut ekranu 10 sekund po ukończeniu wstępnego ładowania strony
rubo77,

1
@ rubo77: Usersnap obsługuje takie dynamiczne domeny DOM, wypróbowałem to na twojej stronie - zrzut ekranu odtwarza dokładną situtację, w tym wszystkie pozycje.
Gregor

Odpowiedzi:


280

OSTATNIA EDYCJA : po 7 latach wciąż otrzymuję głosowanie za tą odpowiedzią, ale myślę, że ta jest teraz znacznie dokładniejsza.


Jasne, że możesz, ale musisz coś wyrenderować stronę. Jeśli naprawdę chcesz używać tylko php, sugeruję ci HTMLTOPS , który renderuje stronę i wyprowadza ją do pliku ps (ghostscript), a następnie przekonwertuj ją na .jpg, .png, .pdf .. może być trochę wolniejszy z złożone strony (i nie obsługują wszystkich CSS).

W przeciwnym razie możesz użyć wkhtmltopdf, aby wydrukować stronę HTML w pdf, jpg, cokolwiek .. Zaakceptuj CSS2.0, użyj webkit (otoki Safari), aby wyrenderować stronę ... więc powinno być dobrze. Musisz go również zainstalować na swoim serwerze ...

AKTUALIZACJA Teraz, dzięki nowej funkcji HTML5 i JS, możliwe jest również renderowanie strony w obiekt kanwy za pomocą JavaScript. Oto fajna biblioteka do zrobienia tego: Html2Canvas, a tutaj jest implementacja tego samego autora, aby uzyskać opinie takie jak G +. Po wyrenderowaniu dom w kanwie, możesz następnie wysłać na serwer za pośrednictwem ajax i zapisać go jako plik jpg.

EDYCJA : Możesz użyć narzędzia imagemagick do przekształcenia pdf na png. Moja wersja wkhtmltopdf nie obsługuje obrazów. Np convert html.pdf -append html.png.

EDYCJA : Ten mały skrypt powłoki daje prosty / ale działający przykład użycia na systemie Linux z php5-cli i wyżej wymienionymi narzędziami.

EDYCJA : zauważyłem, że zespół wkhtmltopdf pracuje nad innym projektem: wkhtmltoimage, który daje bezpośrednio plik jpg


11
+1 za wkhtmltopdf. Bawiłem się innymi bibliotekami, ale żadna z nich nawet nie była w stanie obsłużyć niczego poza bardzo prostym HTML i CSS. wkhtmltopdf może robić wszystko, co robi Safari, więc jesteś tam całkiem bezpieczny.
Wim

7
wkhtmltoimage działa świetnie! Dzięki za wskazówkę. Wysyła również png.
yuttadhammo

2
Teraz wspominasz wkhtmltopdf KnpLabs ma do tego opakowanie github.com/KnpLabs/snappy
rmontagud

1
@rmontagud użycie wkhtmltopdf jest dość łatwe, przy okazji opakowanie OOP jest zawsze dobre!
Strae

1
To były świetne rozwiązania sprzed kilku lat, ale technologia przeglądarek, na której są oparte, nie była na bieżąco z najnowszymi specyfikacjami HTML5 / CSS. Jeśli renderujesz witrynę, która korzysta z webfontów, svg, canvas, flexbox itp., To powodzenia w uzyskiwaniu dokładnego zrzutu ekranu. Jeśli chcesz dokładnych zrzutów ekranu, sprawdź moją odpowiedź, która używa urlbox
cjroebuck

87

Od wersji PHP 5.2.2 możliwe jest przechwytywanie strony internetowej wyłącznie w języku PHP !

imagegrabscreen - Przechwytuje cały ekran

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

imagegrabwindow - Pobiera okno lub jego obszar klienta za pomocą uchwytu systemu Windows (właściwość HWND w instancji 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');
?>

Edycja: Uwaga, te funkcje są dostępne TYLKO w systemach Windows!


26
Naprawdę nie tylko PHP, prawda?
Toby Allen,

Do renderowania rzeczy używa się przeglądarki Internet Explorer.
keanu_reeves

55

Jeśli nie chcesz używać narzędzi innych firm, natknąłem się na proste rozwiązanie, które korzysta z interfejsu API Google Page Insight .

Wystarczy nazwać to api z parametrami screenshot=true.

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

W przypadku widoku witryny mobilnej należy &strategy=mobilepodać parametry,

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

DEMO .


3
Jest to całkiem fajne i wydaje się również działać bez podania klucza API. Zwrócony obraz jest jednak uszkodzony, musisz zastąpić wszystkie „_” znakiem „/” i wszystkie „-” znakiem „+”, a następnie możesz po prostu dodać go jako dane uri
Robert Went

9
To jest niesamowite. Kodowałem
JaseC

21
W celach informacyjnych interfejs Google Page Insight to narzędzie innej firmy.
Jimbo,

1
zrzut ekranu ma ograniczoną rozdzielczość do 320x240, jest jak kciuk
Gabriele F.

1
Naprawdę niesamowite! Ma jakiś limit używania?
moreirapontocom,

19

Do przechwycenia strony możesz użyć prostej przeglądarki bezgłowej, takiej jak PhantomJS.

Możesz także używać PhantomJS z PHP.

Sprawdź ten mały skrypt php, który to robi. Spójrz tutaj https://github.com/microweber/screen

A oto API- http://screen.microweber.com/shot.php?url=/programming/757675/website-screenshots-using-php


PhantomJS jest na ogół świetnym rozwiązaniem do tego celu, chociaż kiedy użyłem go do tego właśnie celu, nie wszystkie elementy interfejsu HTML były renderowane poprawnie.
ultrageek

2
screen.microweber.com/shot.php?url=https://stackoverflow.com/... jest teraz 404 i zastanawia się, czy odpowiedź tutaj powinna zostać usunięta. W obu przypadkach należy go zaktualizować.
Funk Forty Niner

18

To powinno być dla ciebie dobre:

https://wkhtmltopdf.org/

Pamiętaj, aby pobrać dystrybucję wkhtmltoimage!


1
BTW, zainstalowałem go na Ubuntu 10.04 po prostu za pomocą apt-get. Jednak kiedy go uruchomiłem, było to bardzo, bardzo wolne, a układ PDF był przekrzywiony i niezbyt realna. Jednak obiecuje wykorzystanie KHTML w ten sposób - ostatecznie - do generowania obrazów.
Volomike,

@Volomike - Nie można uzyskać lepszych wyników, ponieważ, jak wiadomo, używana jest przeglądarka zgodna ze standardami. Jeśli chodzi o szybkość, firma, z którą współpracuję, wielokrotnie używała go w różnych projektach wymagających drobnoziarnistych (ale małych) projektów CSS.
Chrześcijan

Mogę ręczyć za skuteczność tego produktu. Tworzę aplikacje do tworzenia wykresów dla klientów rządowych, które są dostarczane przez HTML / CSS, ale muszą być zarchiwizowane jako pliki PDF. ŻADNY INNY produkt web-to-pdf nie był tak blisko doskonałego odwzorowania naszych wykresów jak wkhtmltopdf.
Daniel Szabo,

@Volomike: wersja w repozytorium zwykle nie jest najnowsza; zainstalowanie najnowszej stabilnej wersji ze źródła naprawiło dla mnie wiele dziwactw starszej wersji.
Piskvor opuścił budynek

10

Tak. Będziesz potrzebować kilku rzeczy:

Zobacz khtmld (aemon) na * nx. Zobacz Url2Jpg dla Windows, ale ponieważ jest to aplikacja dotNet, powinieneś również sprawdzić Url2Bmp

Oba są narzędziami konsolowymi, których można użyć z aplikacji internetowej, aby uzyskać zrzut ekranu.

Istnieją również usługi sieciowe, które to oferują. Sprawdź to na przykład.

Edytować:

Ten link jest przydatny.


10

Jest w Pythonie, ale przeglądając dokumentację i kod, możesz dokładnie zobaczyć, jak to się robi. Jeśli potrafisz uruchomić Pythona, jest to gotowe rozwiązanie dla Ciebie:

http://browsershots.org/

Pamiętaj, że wszystko może działać na jednej maszynie dla jednej platformy lub jednej maszynie z maszynami wirtualnymi z innymi platformami.

Bezpłatne, open source, przewiń na dół strony, aby znaleźć linki do dokumentacji, kodu źródłowego i innych informacji.


24
Reguła 37: Nie ma przesady. Jest tylko „otwarty ogień” i „czas na przeładowanie”.
Adam Davis,

Kod źródłowy nadal uruchamia przeglądarkę pulpitu do renderowania. Nie jest to całkowicie bezpieczne dla wątków i może być podatne na blokowanie.
Volomike,

@Volomike - Prawda, ale jeśli chcesz zobaczyć, jak strona wygląda, gdy uruchamia ją przeglądarka, nie ma lepszego wyboru. Silniki renderujące HTML sięgają tylko do dzisiejszych ciężkich stron z javascript. Ustawienie odpowiednich uprawnień do wykonywania i limitów czasu powinno ograniczyć trudności i ryzyko związane z uruchomieniem zewnętrznego programu.
Adam Davis,


5

Cóż, PhantomJS to przeglądarka, którą można łatwo umieścić na serwerze i zintegrować z php. Możesz znaleźć kod w WDudes. Obejmują one o wiele więcej funkcji, takich jak określanie rozmiaru obrazu, pamięci podręcznej, pobieranie jako plik lub wyświetlanie w img src itp.

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

Parametry URL

  • Szerokość i wysokość: screenshot.php? Url = google.com & w = 1000 & h = 800

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

  • Wyłącz pamięć podręczną i załaduj świeże screesnhot:
    screenshot.php? Url = google.com & cache = 0

  • Aby pobrać obraz: screenshot.php? Url = google.com & download = true

Samouczek możesz zobaczyć tutaj: Przechwyć zrzut ekranu strony internetowej wykorzystującej PHP bez interfejsu API


O. Przepraszam za to. Wygląda na to, że blog już nie istnieje. Spróbuj github.com/graphcool/chromeless @NarendraVerma
Varghese

4

cutycapt zapisuje strony internetowe do większości formatów graficznych (jpg, png ..) pobierz je z synaptic, działa znacznie lepiej niż wkhtmltopdf



3

W końcu skonfigurowałem za pomocą microweber / screen, jak zaproponował @boksiora.
Początkowo, gdy próbuję wspomnieć tutaj link , co mam:

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

Jestem na Linuksie. Więc jeśli chcesz go uruchomić, możesz dostosować mój krok do swojego środowiska.
Oto krok, który zrobiłem na mojej powłoce na DOCUMENT_ROOTfolderze:

$ 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

Wskaż swoją przeglądarkę na screen/demo/shot.php?url=google.com. Gdy zobaczysz zrzut ekranu , gotowe. Dyskusja na temat bardziej zaawansowanych ustawień jest dostępna tutaj i tutaj .


3

Istnieje wiele projektów typu open source, które mogą generować zrzuty ekranu. Na przykład PhantomJS, webkit2png itp

Dużym problemem związanym z tymi projektami jest to, że opierają się one na starszej technologii przeglądarki i mają problemy z renderowaniem wielu witryn, zwłaszcza witryn korzystających z webfontów, flexboksa, svg i różnych innych dodatków do specyfikacji HTML5 i CSS w ciągu ostatnich kilku miesięcy / lat.

Wypróbowałem kilka usług stron trzecich, a większość z nich oparta jest na PhantomJS, co oznacza, że ​​produkują również zrzuty niskiej jakości. Najlepszą zewnętrzną usługą do generowania zrzutów ekranu z witryny jest urlbox.io . Jest to usługa płatna, chociaż istnieje bezpłatna 7-dniowa wersja próbna, aby przetestować ją bez zobowiązania się do żadnego płatnego planu.

Oto link do dokumentacji , a poniżej znajdują się proste kroki, aby uruchomić ją w PHP z kompozytorem.

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

Na przykład oto zrzut ekranu tej samej strony w pełnej wysokości:

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

pełny zrzut ekranu strony stackoverflow.com obsługiwany przez urlbox.io


3

Istnieje wiele opcji i wszystkie mają swoje zalety i wady. Oto lista opcji uporządkowanych według stopnia trudności implementacji.

Opcja 1: Użyj interfejsu API (najłatwiejszego)

Plusy

  • Uruchom Javascript
  • Prawie idealne renderowanie
  • Szybko, gdy opcje buforowania są poprawnie używane
  • Skalą zajmują się interfejsy API
  • Dokładny czas, rzutnia, ...
  • Przez większość czasu oferują bezpłatny plan

Cons

  • Nie za darmo, jeśli planujesz ich często używać

Opcja 2: Użyj jednej z wielu dostępnych bibliotek

Plusy

  • Przez większość czasu konwersja jest dość szybka

Cons

  • Złe renderowanie
  • Nie wykonuje javascript
  • Brak obsługi najnowszych funkcji internetowych (FlexBox, selektory zaawansowane, komponenty WWW, zmiana rozmiaru skrzynki, zapytania o media, tagi HTML5 ...)
  • Czasami nie jest tak łatwy do zainstalowania
  • Skomplikowane w skali

Opcja 3: Użyj PhantomJs i być może biblioteki otoki

Plusy

  • Uruchom Javascript
  • Dosyć szybko

Cons

  • Złe renderowanie
  • PhantomJs został wycofany i nie jest już utrzymywany.
  • Brak obsługi najnowszych funkcji internetowych (FlexBox, selektory zaawansowane, komponenty WWW, zmiana rozmiaru skrzynki, zapytania o media, tagi HTML5 ...)
  • Skomplikowane w skali
  • Nie jest tak łatwo go uruchomić, jeśli trzeba załadować obrazy ...

Opcja 4: użyj Chrome Headless i być może biblioteki otoki

Plusy

  • Uruchom Javascript
  • Prawie idealne renderowanie

Cons

  • Nie tak łatwo uzyskać dokładnie pożądany wynik w zakresie:
    • czas ładowania strony
    • integracja proxy
    • automatyczne przewijanie
    • ...
  • Skomplikowane w skali
  • Dość wolny, a nawet wolniejszy, jeśli HTML zawiera linki zewnętrzne

Oświadczenie: Jestem założycielem ApiFlash. Dałem z siebie wszystko, aby udzielić uczciwej i pożytecznej odpowiedzi.


2

Korzystam z systemu Windows, więc mogłem korzystać z funkcji imagegrabwindow po przeczytaniu podpowiedzi tutaj ze Stephana. Dodałem kadrowanie (aby pozbyć się nagłówka przeglądarki, pasków przewijania itp.) I zmianę rozmiaru, aby uzyskać ostateczny obraz. Oto mój kod . Mam nadzieję, że komuś pomoże.


1

webkit2html działa na Mac OS X i Linux, jest dość prosty w instalacji i obsłudze. Zobacz ten samouczek .

W systemie Windows możesz przejść z CutyCapt , który ma podobną funkcjonalność.


2
@ Smith: Ostatnio sprawdziłem, CutyCapt ma wszystkie zależności w instalatorze. Tak, prawdopodobnie nie będziesz w stanie zainstalować tego na ograniczonym koncie, ale takie jest życie. Pamiętaj, że wszystkie inne rozwiązania używają pewnego rodzaju otoki wokół rdzenia renderującego, więc jesteś z nimi w tym samym miejscu.
Piskvor opuścił budynek

1

Użyłem Blugi . Interfejs API pozwala na zrobienie 100 migawek miesięcznie bez płacenia, ale czasami wykorzystuje więcej niż 1 kredyt na pojedynczą stronę. Właśnie skończyłem aktualizację modułu drupal, Bluga WebThumbs do drupal 7, który pozwala wydrukować miniaturę w szablonie lub filtrze wejściowym.

Główną zaletą korzystania z tego interfejsu API jest to, że pozwala on określić wymiary przeglądarki w przypadku korzystania z adaptacyjnego css, więc używam go, aby uzyskać rendering dla układu telefonu i tabletu, a także zwykłego.

Istnieją klienci interfejsu API dla następujących języków:

PHP , Python , Ruby , Java , .Net C # , Perl i Bash (skrypt powłoki wygląda tak, jakby wymagał perla)



1

Możesz użyć rozwiązania https://grabz.it .

Ma PHP API, które jest bardzo elastyczne i może być wywoływane na różne sposoby, na przykład z cronjob lub strony internetowej PHP.

Aby go zaimplementować, musisz najpierw uzyskać klucz aplikacji i klucz tajny oraz pobrać (bezpłatny) zestaw SDK.

I przykład wdrożenia. Przede wszystkim inicjalizacja:

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

I przykład zrzutu ekranu:

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

Następnym krokiem jest zapisanie. Możesz użyć jednej z dwóch metod zapisu, Savejeśli dostępny jest publicznie dostępny uchwyt wywołania zwrotnego, a SaveTojeśli nie. Sprawdź w dokumentacji szczegółów .


Jeśli szukasz pełnych zrzutów ekranu, ten dostawca wymaga subskrypcji Professional (170 USD rocznie).
chaoskreator

1

Napisałem szybką i brudną aplikację, która zrobiła to za pomocą Google API. Z pewnością zakres ulepszeń ...

  • Wykorzystuje najnowszą wersję Google API 5.
  • Rozmiar obrazu ma teraz szerokość 500 pikseli
  • Obsługuje widok na komputery i urządzenia mobilne
  • Zapisz w pliku w określonym folderze
  • Włącz podstawowy system pamięci podręcznej

Znajdź go tutaj z prezentacją na żywo i kodem .

Nie opublikowałem tutaj kodu po prostu dlatego, że wciąż go udoskonalam i mam nadzieję, że kiedy będę miał czas, przekonwertuję go na odpowiednią klasę.


0

Użyłem page2images . Jest opracowany w oparciu o cutycapt, który jest naprawdę szybki i stabilny. Jeśli nie chcesz spędzać zbyt wiele czasu na wydajności i konfiguracji, powinieneś go użyć. Jeśli wejdziesz na ich stronę internetową, możesz znaleźć więcej szczegółów i przykładowy kod PHP.


0

Po wielu surfowaniu w sieci znalazłem to.

PPTRAAS > Darmowe narzędzie do robienia zrzutów ekranu poprzez podanie adresu URL jako parametru

Zapewniają wiele opcji, po prostu naciskając ich adres URL.

  1. Pobierz pełny zrzut ekranu

    https://pptraas.com/screenshot?url= {YOU URL HERE}

  2. Uzyskaj zrzut ekranu o określonym rozmiarze

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

  3. Można nawet przekonwertować stronę na pdf

    https://pptraas.com/pdf?url= {YOU URL HERE}


Josh, kiedy przesłałem odpowiedź, to działa dobrze, myślę, że nie możemy być zależni od tego adresu URL, znajdź inną alternatywę, ponieważ mogliby na razie zatrzymać usługę
Fenil Shah

0

Możesz zrobić 2 rzeczy.

Użyj Puppeteer

Możesz użyć pakietu PHP Puppeteer, aby uruchomić przeglądarkę i zrobić zrzut ekranu.

Użyj interfejsu API

Istnieje wiele interfejsów API zrzutów ekranu. Możesz na przykład spojrzeć na ScreenshotAPI.net . (Oświadczenie Jestem twórcą tego API)


-1

Nie bezpośrednio. Oprogramowanie takie jak Selenium ma takie funkcje i może być kontrolowane przez PHP, ale ma też inne zależności (takie jak uruchamianie serwera opartego na Javie na komputerze z przeglądarką, którą chcesz zrzut ekranu)


Dostępnych jest teraz wiele bibliotek PHP. Niezupełnie biblioteka „PHP”. Obejmuje przeglądarkę js i kody.
Gijo Varghese


-1

Uważam, że jest to najlepsze i najłatwiejsze narzędzie: ScreenShotMachine . Jest to usługa płatna, ale dostajesz 100 bezpłatnych zrzutów ekranu i możesz kupić kolejne 2000 za (około) 20 USD, więc jest to całkiem dobra oferta. Ma bardzo proste użycie, wystarczy użyć adresu URL, więc napisałem ten mały skrypt, aby zapisać plik na jego podstawie:

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

Mają bardzo dobrą dokumentację tutaj , więc powinno się przyjrzeć.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.