Скриншоты сайта


407

Есть ли способ сделать снимок экрана сайта в PHP, а затем сохранить его в файл?


2
Если вам нравится решение проблемы, обратите внимание на Usersnap - это хороший сервис, предлагающий точные снимки экрана веб-сайта. Вам просто нужно добавить небольшой фрагмент Javascript на свою страницу, чтобы он заработал.
Грегор

1
Usersnap не может справиться с веб-страницами, которые используют Ajax для создания контента, как на этой странице . Как я мог этого добиться? скажем так: сделайте скриншот через 10 секунд после завершения начальной загрузки страницы
rubo77

1
@ rubo77: Usersnap поддерживает такие динамические DOM, я пробовал на вашей странице - скриншот воспроизводит точное положение, включая все позиции.
Грегор,

Ответы:


280

ПОСЛЕДНИЕ РЕДАКТИРОВАТЬ : через 7 лет я все еще получаю отклики за этот ответ, но я думаю, что этот теперь намного точнее.


Конечно, вы можете, но вам нужно будет отрисовать страницу с чем-то. Если вы действительно хотите использовать только php, я предлагаю вам HTMLTOPS , который визуализирует страницу и выводит ее в файл ps (ghostscript), а затем конвертирует ее в .jpg, .png, .pdf .. может быть немного медленнее с сложные страницы (и не поддерживают все CSS).

Иначе , вы можете использовать wkhtmltopdf для вывода html-страницы в формате pdf, jpg и т. Д. Примите CSS2.0, используйте webkit (оболочку сафари) для отображения страницы .. так что все должно быть в порядке. Вы должны установить его на свой сервер, а также ..

ОБНОВЛЕНИЕ Теперь, с новой функцией HTML5 и JS, также можно отобразить страницу в объект холста с помощью JavaScript. Вот хорошая библиотека для этого: Html2Canvas, а вот реализация того же автора для получения обратной связи, подобной G +. После того, как вы поместили dom на холст, вы можете отправить его на сервер через ajax и сохранить его в формате jpg.

РЕДАКТИРОВАТЬ : Вы можете использовать инструмент imagemagick для преобразования PDF в PNG. Моя версия wkhtmltopdf не поддерживает изображения. Например convert html.pdf -append html.png.

РЕДАКТИРОВАТЬ : Этот небольшой сценарий оболочки дает простой / но рабочий пример использования на Linux с php5-cli и инструментами, упомянутыми выше.

РЕДАКТИРОВАТЬ : я заметил, что теперь команда wkhtmltopdf работает над другим проектом: wkhtmltoimage, который дает вам JPG напрямую


11
+1 за wkhtmltopdf. Я играл с некоторыми другими библиотеками, но ни одна из них даже не приблизилась к поддержке чего-либо большего, чем очень простой HTML и CSS. wkhtmltopdf может делать все, что делает Safari, так что вы в безопасности.
Вим

7
wkhtmltoimage прекрасно работает! Спасибо за совет. Выходы png также.
Юттадхаммо

2
Теперь вы упоминаете, что wkhtmltopdf KnpLabs имеет обертку для него github.com/KnpLabs/snappy
rmontagud

1
@rmontagud довольно просто использовать wkhtmltopdf, кстати, оболочка ООП всегда хороша!
Strae

1
Все это было отличным решением несколько лет назад, но технология браузера, на которой они все основаны, не соответствовала последним в спецификации HTML5 / CSS. Если вы создаете сайт, в котором используются веб-шрифты, svg, canvas, flexbox и т. Д., То удачи в получении точного снимка экрана. Если вы хотите получить точные снимки экрана, проверьте мой ответ, в котором используется urlbox
cjroebuck

87

Начиная с PHP 5.2.2, возможно захватить сайт исключительно с помощью PHP !

imagegrabscreen - захватывает весь экран

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

imagegrabwindow - захватывает окно или его клиентскую область, используя дескриптор окна (свойство HWND в экземпляре 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');
?>

Изменить: Обратите внимание, что эти функции доступны только в системах Windows!


26
Не совсем так ли PHP?
Тоби Аллен

Это использует браузер Internet Explorer для рендеринга.
keanu_reeves

55

Если вы не хотите использовать какие-либо сторонние инструменты, я наткнулся на простое решение, использующее API Google Page Insight .

Просто нужно назвать это API с параметрами screenshot=true.

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

Для просмотра мобильного сайта передайте &strategy=mobileв параметрах,

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

ДЕМО .


3
Это довольно круто и, кажется, работает без предоставления ключа API. Возвращенное изображение повреждено, вам нужно заменить все '_' на '/' и все '-' на '+', а затем вы можете просто добавить его в качестве данных uri
Robert Went

9
Это круто. Я кодировал это на gist.github.com/jaseclamp/d4ac6205db352e822ff6
JaseC

21
Итак, для справки, Google Page Insight API является сторонним инструментом.
Джимбо

1
скриншоты имеют ограниченное разрешение до 320х240, это как большой палец
Габриэле Ф.

1
Действительно удивительным! У него есть ограничение на его использование?
moreirapontocom

19

Вы можете использовать простой безголовый браузер, такой как PhantomJS, чтобы захватить страницу.

Также вы можете использовать PhantomJS с PHP.

Проверьте этот маленький скрипт php, который делает это. Посмотрите здесь https://github.com/microweber/screen

А вот и API- http://screen.microweber.com/shot.php?url=/programming/757675/website-screenshots-using-php


PhantomJS, как правило, является отличным решением для этого, хотя, когда я использовал его именно для этой цели, не все элементы интерфейса HTML отображались правильно.
ultrageek

2
screen.microweber.com/shot.php?url=https://stackoverflow.com/… теперь 404 и задается вопросом, следует ли здесь удалить ответ. В любом случае это должно быть обновлено.
Funk Forty Niner

18

Это должно быть хорошо для вас:

https://wkhtmltopdf.org/

Убедитесь, что вы скачали дистрибутив wkhtmltoimage!


1
Кстати, я установил его на Ubuntu 10.04 просто с помощью apt-get. Тем не менее, когда я запустил его, он был очень, очень медленным, и макет PDF был неуверенным и не вполне приемлемым вариантом. Тем не менее, он обещает использовать KHTML таким образом - в конечном итоге - для генерации изображений.
Volomike

@Volomike - Вы не можете получить лучший результат, чем этот, поскольку, как вы знаете, используется браузер, соответствующий стандартам. Что касается скорости, компания, с которой я работаю, неоднократно использовала ее в различных проектах, требующих мелкозернистых (но небольших) CSS-проектов.
Кристиан

Я могу ручаться за эффективность этого продукта. Я разрабатываю графические приложения для правительственных клиентов, которые доставляются через HTML / CSS, но должны быть заархивированы в формате PDF. НИКАКОЙ ДРУГОЙ продукт web-to-pdf не был настолько близок к идеальному воспроизведению наших диаграмм, как wkhtmltopdf.
Даниэль Сзабо

@Volomike: версия в репозитории обычно не самая новая; установка последней стабильной версии из источника исправила многие причуды старой версии для меня.
Писквор покинул здание

10

Да. Вам понадобятся некоторые вещи, которые:

Смотрите khtmld (aemon) на * nx. Посмотрите Url2Jpg для Windows, но так как это приложение dotNet, вам также следует проверить Url2Bmp

Оба являются консольными инструментами, которые вы можете использовать в своем веб-приложении, чтобы получить скриншот.

Есть также веб-сервисы, которые предлагают это. Проверьте это , например.

Редактировать:

Эта ссылка полезна для.


10

Это на Python, но, просматривая документацию и код, вы можете увидеть, как именно это делается. Если вы можете запустить Python, то это готовое решение для вас:

http://browsershots.org/

Обратите внимание, что все может работать на одной машине для одной платформы или на одной машине с виртуальными машинами, работающими на других платформах.

Бесплатно, с открытым исходным кодом, прокрутите вниз страницы для ссылок на документацию, исходный код и другую информацию.


24
Правило 37: Излишества нет. Есть только «открытый огонь» и «время для перезагрузки».
Адам Дэвис

Исходный код все еще запускает настольный браузер для рендеринга. Это не совсем потокобезопасно и может быть подвержено блокировке.
Volomike

@Volomike - Да, но если вам нужно посмотреть, как выглядит страница, когда ее запускает браузер, вряд ли есть лучший выбор. Механизмы рендеринга HTML зашли так далеко с сегодняшними тяжелыми страницами JavaScript. Установка соответствующих разрешений на выполнение и тайм-аутов должна ограничивать трудности и риски запуска внешней программы.
Адам Дэвис

5

Да, это так. Если вам нужно только изображение URL, попробуйте это

<img src='http://zenithwebtechnologies.com.au/thumbnail.php?url=www.subway.com.au'>

Передавайте URL в качестве аргумента, и вы получите изображение для более подробной информации, перейдите по этой ссылке http://zenithwebtechnologies.com.au/auto-thumbnail-generation-from-url.html


2
Служба была остановлена.
Мохаммед Наджи

5

Ну, PhantomJS - это браузер, который можно легко поставить на сервер и интегрировать в php. Вы можете найти код в WDudes. Они включают в себя намного больше функций, таких как указание размера изображения, кэша, загрузки в виде файла или отображения в img src и т. Д.

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

Параметры URL

  • Ширина и высота: screenshot.php? Url = google.com & w = 1000 & h = 800

  • С кадрированием: screenshot.php? Url = google.com & w = 1000 & h = 800 & clipw = 800 & cliph = 600

  • Отключите кеш и загрузите свежие скриншоты:
    screenshot.php? Url = google.com & cache = 0

  • Чтобы загрузить изображение: screenshot.php? Url = google.com & download = true

Вы можете посмотреть учебник здесь: Снимок экрана веб-сайта с использованием PHP без API


ой. Прости за это. Похоже, блога больше нет. Попробуйте github.com/graphcool/chromeless @NarendraVerma
Гихо Варгезе

4

Cutycapt сохраняет веб-страницы в большинстве графических форматов (JPG, PNG ..) скачать его с Synaptic, он работает намного лучше, чем wkhtmltopdf



3

Наконец я настроил использование microweber / screen, как предложено @boksiora.
Изначально при попытке упомянутой ссылки вот что я получил:

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

Я на Linux. Поэтому, если вы хотите запустить его, вы можете настроить мой шаг следуя вашей среде.
Вот шаг, который я сделал для своей оболочки в DOCUMENT_ROOTпапке:

$ 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

Укажите ваш браузер на screen/demo/shot.php?url=google.com. Когда вы видите скриншот , все готово. Обсуждение дополнительных настроек доступно здесь и здесь .


3

Есть много проектов с открытым исходным кодом, которые могут создавать скриншоты. Например, PhantomJS, webkit2png и т. Д.

Большая проблема этих проектов заключается в том, что они основаны на более старой технологии браузера и имеют проблемы с отображением многих сайтов, особенно сайтов, использующих веб-шрифты, flexbox, svg и различные другие дополнения к спецификации HTML5 и CSS за последние пару месяцев / лет.

Я пробовал несколько сторонних сервисов, и большинство из них основаны на PhantomJS, что означает, что они также создают скриншоты низкого качества. Лучший сторонний сервис для создания скриншотов сайта - urlbox.io . Это платная услуга, хотя есть бесплатная 7-дневная пробная версия, чтобы протестировать ее без каких-либо платных планов.

Вот ссылка на документацию , и ниже приведены простые шаги, чтобы заставить его работать на PHP с помощью 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" />

Например, вот полный снимок экрана этой страницы:

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 = истина

полный скриншот страницы stackoverflow.com вопрос работает на urlbox.io


3

Вариантов много, и у всех есть свои плюсы и минусы. Вот список вариантов, упорядоченных по сложности реализации.

Вариант 1: использовать API (самый простой)

Pros

  • Выполнить Javascript
  • Почти идеальный рендеринг
  • Быстро при правильном использовании параметров кэширования
  • Шкала обрабатывается API
  • Точное время, окно просмотра, ...
  • Большую часть времени они предлагают бесплатный план

Cons

  • Не бесплатно, если вы планируете использовать их много

Вариант 2. Используйте одну из множества доступных библиотек

Pros

  • Конверсия в большинстве случаев довольно быстрая

Cons

  • Плохой рендеринг
  • Не выполняет JavaScript
  • Отсутствует поддержка последних веб-функций (FlexBox, расширенные селекторы, веб-шрифты, размеры ящиков, медиазапросы, теги HTML5 ...)
  • Иногда не так просто установить
  • Сложно масштабировать

Вариант 3: используйте PhantomJs и, возможно, библиотеку-обертку

Pros

  • Выполнить Javascript
  • Довольно быстро

Cons

  • Плохой рендеринг
  • PhantomJs устарела и больше не поддерживается.
  • Отсутствует поддержка последних веб-функций (FlexBox, расширенные селекторы, веб-шрифты, размеры ящиков, медиазапросы, теги HTML5 ...)
  • Сложно масштабировать
  • Не так легко заставить его работать, если есть изображения для загрузки ...

Вариант 4. Используйте Chrome Headless и, возможно, библиотеку-оболочку.

Pros

  • Выполнить Javascript
  • Почти идеальный рендеринг

Cons

  • Не так просто получить желаемый результат в отношении:
    • время загрузки страницы
    • интеграция с прокси
    • автоматическая прокрутка
    • ...
  • Сложно масштабировать
  • Довольно медленно и даже медленнее, если HTML содержит внешние ссылки

Отказ от ответственности: я основатель ApiFlash. Я сделал все возможное, чтобы дать честный и полезный ответ.


2

Я на Windows, поэтому я смог использовать функцию imagegrabwindow после прочтения подсказки здесь от Стефана. Я добавил обрезку (чтобы избавиться от заголовка браузера, полос прокрутки и т. Д.) И изменение размера, чтобы получить окончательное изображение. Вот мой код . Надеюсь, что это помогает кому-то.


1

webkit2html работает на Mac OS X и Linux, довольно прост в установке и использовании. Смотрите этот урок .

Для Windows вы можете использовать CutyCapt , который имеет аналогичную функциональность.


2
@ Смит: В прошлый раз, когда я проверял, у CutyCapt есть все зависимости в установщике. Да, вы, вероятно, не сможете установить это под ограниченной учетной записью, но это жизнь. Обратите внимание, что все другие решения используют какую-то оболочку для ядра рендеринга, поэтому вы находитесь в одном месте с ними.
Писквор покинул здание

1

Я использовал блюгу . API позволяет делать 100 снимков в месяц без оплаты, но иногда он использует более 1 кредита на одну страницу. Я только что закончил обновление модуля drupal, Bluga WebThumbs до drupal 7, который позволяет вам печатать миниатюру в шаблоне или входном фильтре.

Основным преимуществом использования этого API-интерфейса является то, что он позволяет указывать размеры браузера в случае, если вы используете адаптивный CSS, поэтому я использую его для получения визуализаций для макета мобильного телефона и планшета, а также обычного.

Есть клиенты API для следующих языков:

PHP , Python , Ruby , Java , .Net C # , Perl и Bash (сценарий оболочки выглядит так, как будто он требует perl)


1

Все зависит от того, как вы хотите сделать скриншот.

Вы можете сделать это через PHP, используя веб-сервис, чтобы получить изображение для вас

У grabz.it есть веб-сервис, чтобы сделать это, вот статья, показывающая простой пример использования сервиса.

http://www.phpbuilder.com/articles/news-reviews/miscellaneous/capture-screenshots-in-php-with-grabzit-120524022959.html


1

Вы можете использовать решение https://grabz.it .

Он имеет PHP API, который очень гибок и может вызываться по-разному, например, из cronjob или веб-страницы PHP.

Для того , чтобы реализовать его вам нужно будет сначала получить ключ приложения и секрет и скачать в (бесплатно) SDK.

И пример для реализации. Прежде всего инициализация:

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

И пример скриншота:

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

Далее идет сохранение. Вы можете использовать один из двух методов сохранения, Saveесли доступен общедоступный дескриптор обратного вызова, а SaveToесли нет. Проверьте документацию для деталей .


Если вы ищете полностраничные скриншоты, этот провайдер требует подписку Professional ($ 170 / год).
Chaoskreator

1

Я написал быстрое и грязное приложение на днях для этого с помощью Google API. Безусловно, возможности для улучшения ...

  • Он использует последнюю версию Google API версии 5.
  • Размер изображения теперь 500px в ширину
  • Поддерживает рабочий стол и мобильный вид
  • Сохранить в файл в указанной папке
  • Включите элементарную систему кэширования

Найдите это здесь с живой демонстрацией и кодом .

Я не размещал код здесь просто потому, что продолжаю дорабатывать его и, надеюсь, когда у меня будет время, преобразовать его в подходящий класс.


0

Я использовал page2images . Он разработан на базе кутикапты, который действительно быстр и стабилен. Если вы не хотите тратить слишком много времени на производительность и настройку, вы должны использовать это. Если вы зайдете на их сайт, вы можете найти более подробную информацию и пример кода PHP.


0

После долгих поисков в Интернете я нашел это.

PPTRAAS > Бесплатный инструмент для захвата скриншота путем передачи вашего URL в качестве параметра

Они предоставляют несколько вариантов, просто нажав их URL.

  1. Получить полный скриншот страницы

    https://pptraas.com/screenshot?url= {ВЫ URL ЗДЕСЬ}

  2. Получить скриншот страницы определенного размера

    https://pptraas.com/screenshot?url= {ВЫ URL ЗДЕСЬ} & size = 400 400

  3. Можно даже конвертировать страницу в PDF

    https://pptraas.com/pdf?url= {ВЫ URL ЗДЕСЬ}


Джош, когда я загрузил ответ, он хорошо работает, я думаю, мы не можем зависеть от этого URL, пожалуйста, найдите другую альтернативу, поскольку они могли бы остановить службу на данный момент
Фенил Шах,

0

Вы могли бы сделать 2 вещи.

Используйте Кукольника

Вы можете использовать пакет PHP Puppeteer, чтобы раскрутить браузер и сделать скриншот.

Используйте API

Есть много скриншотов API. Вы можете посмотреть на ScreenshotAPI.net, например. (Отказ от ответственности, я создатель этого API)


-1

Не напрямую. Такие программы, как Selenium, имеют такие функции и могут управляться PHP, но имеют другие зависимости (например, запуск сервера на базе Java на компьютере с браузером, который вы хотите сделать снимок экрана)


Сейчас доступно много библиотек PHP. Не совсем библиотека 'PHP'. Включает в себя некоторые JS-браузер и коды.
Гихо Варгезе


-1

Я обнаружил, что это лучший и самый простой инструмент: ScreenShotMachine . Это платный сервис, но вы получаете 100 бесплатных скриншотов и можете купить еще 2000 за (около) 20 долларов, так что это довольно хорошая сделка. Он очень прост в использовании, вы просто используете URL, поэтому я написал этот небольшой скрипт для сохранения файла на его основе:

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

Они имеют очень хорошую документацию здесь , так что вы должны обязательно посмотреть.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.