Скріншоти веб-сайтів


407

Чи є спосіб зробити знімок екрана веб-сайту в PHP, а потім зберегти його у файл?


2
Якщо вам подобається крапля рішення, подивіться на Usersnap - це приємний сервіс, що пропонує точні скріншоти веб-сайтів. Вам просто потрібно додати невеликий фрагмент Javascript на свою сторінку, щоб він працював.
Грегор

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

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

Відповіді:


280

Останнє редагування : через 7 років я все ще отримую інформацію за цю відповідь, але, мабуть, ця зараз набагато точніша.


Звичайно, ви можете, але вам потрібно буде щось перетворити на сторінку. Якщо ви дійсно хочете використовувати лише php, я пропоную вам HTMLTOPS , який відображає сторінку та виводить її у файл ps (ghostscript), а потім конвертувати її у формат .jpg, .png, .pdf. складні сторінки (і підтримують не всі CSS).

В іншому випадку, ви можете використовувати wkhtmltopdf для виведення HTML-сторінки у форматі pdf, jpg, будь-що інше. Ви також повинні встановити його на свій сервер ..

ОНОВЛЕННЯ Тепер, за допомогою нової функції HTML5 та JS, також можна перетворити сторінку в об'єкт із полотном за допомогою JavaScript. Ось приємна бібліотека для цього: Html2Canvas, і ось реалізація того ж автора, щоб отримати зворотний зв'язок, як G +. Після виведення купола в полотно, ви можете відправити на сервер через ajax і зберегти його як jpg.

EDIT : Ви можете використовувати інструмент imagemagick для перетворення PDF у png. Моя версія wkhtmltopdf не підтримує зображення. Напр convert html.pdf -append html.png.

EDIT : Цей невеликий скрипт оболонки дає простий / але працюючий приклад використання на Linux з php5-cli та згаданими вище інструментами.

EDIT : я помітив, що команда wkhtmltopdf працює над іншим проектом: wkhtmltoimage, який дає вам jpg безпосередньо


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

7
wkhtmltoimage чудово працює! Дякую за пораду. Виходи png також.
yuttadhammo

2
Тепер ви згадуєте wkhtmltopdf KnpLabs має обгортку для цього github.com/KnpLabs/snappy
rmontagud

1
@rmontagud використання wkhtmltopdf досить легко, до речі, обгортання OOP завжди добре!
Strae

1
Все це були чудові рішення кілька років тому, але технологія браузера, на якій вони базуються, не була в курсі останніх специфікацій HTML5 / CSS. Якщо ви рендерируєте веб-сайт, який використовує веб-шрифти, svg, полотно, флексбокс тощо, то удачі отримати точний знімок екрана .. Якщо ви хочете точних знімків екрана, перевірте мою відповідь, яка використовує urlbox
cjroebuck

87

Оскільки PHP 5.2.2 можливо, захоплювати веб-сайт виключно PHP !

imagegrabscreen - захоплює весь екран

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

imagegrabwindow - захоплює вікно або його клієнтську область за допомогою ручки Windows (властивість 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.

Просто потрібно назвати це 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

DEMO .


3
Це дуже круто і, здається, працює, не надаючи ключ api. Зображення, яке повертається, порушено, хоча вам потрібно замінити всі '_' на '/' і всі '-' на '+', і тоді ви можете просто додати його як дані uri
Роберт Вент

9
Це круто. Я зашифрував
JaseC

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

1
скріншот має обмежену роздільну здатність до 320x240, схожий на великий палець
Габріеле Ф.

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
BTW, я встановив його на Ubuntu 10.04 просто за допомогою apt-get. Однак, коли я запустив його, це було дуже, дуже повільно, і PDF-макет був скошеним і не дуже життєздатним варіантом. Однак це показує обіцянку використовувати KHTML таким чином - врешті-решт - для створення зображень.
Воломійк

@Volomike - Ви не можете отримати кращих результатів, ніж це, оскільки, як відомо, використовується стандартний браузер. Що стосується швидкості, компанія, з якою я працюю, неодноразово використовувала її в різних проектах, де потрібні дрібнозернисті (але невеликі) CSS-проекти.
Крістіан

Я можу поручитися за ефективність цього продукту. Я розробляю програми для графіків для державних клієнтів, які доставляються через html / css, але їх потрібно архівувати як PDF. НІЙ ІНШИЙ продукт із веб-до PDF не наблизився до ідеального відтворення наших графіків, як wkhtmltopdf.
Даніель Сабо

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

10

Так. Вам знадобляться деякі речі:

Дивіться khtmld (aemon) на * nx. Дивіться Url2Jpg для Windows, але оскільки це dotNet додаток, ви також повинні відзначити Url2Bmp

Обидва є консольними інструментами, які ви можете використовувати з вашого веб-програми, щоб отримати знімок екрана.

Є також веб-сервіси, які пропонують це. Перевірте це , наприклад.

Редагувати:

Це посилання корисно.


10

Це в Python, але переглянувши документацію та код, ви зможете точно побачити, як це робиться. Якщо ви можете запустити python, то це готове рішення для вас:

http://browsershots.org/

Зауважте, що все може працювати на одній машині для однієї платформи або на одній машині з віртуальними машинами, що працюють на інших платформах.

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


24
Правило 37: Перевищення не існує. Є лише "відкритий вогонь" і "час для перезавантаження".
Адам Девіс

Вихідний код все ще запускає настільний браузер для візуалізації. Це не зовсім безпечно для потоків і може бути схильним до блокування.
Воломійк

@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
Gijo Varghese

4

cutycapt зберігає веб-сторінки у більшості форматів зображень (jpg, png ..), завантажуйте їх із синаптичного файлу, він працює набагато краще, ніж wkhtmltopdf



3

Нарешті я налаштувався за допомогою мікровебеля / екрану, як запропонував @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 з композитором.

// 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%2Fstackoquesflow.com%FF2c2c5c5vers7%5%2Feckoversflow.com%2Feckoversіus.com%2Feckows 2F43652083% 2343652083 & full_page = вірно

скріншот повної сторінки питання stackoverflow.com, що працює на urlbox.io


3

Варіантів дуже багато, і всі вони мають свої плюси і мінуси. Ось список варіантів, упорядкованих за труднощами з реалізацією.

Варіант 1: Використовуйте API (найпростіший)

Плюси

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

Мінуси

  • Не безкоштовно, якщо ви плануєте їх багато використовувати

Варіант 2: Використовуйте одну з багатьох доступних бібліотек

Плюси

  • Перетворення відбувається досить швидко більшу частину часу

Мінуси

  • Погана візуалізація
  • Не виконує JavaScript
  • Немає підтримки останніх веб-функцій (FlexBox, Додаткові селектори, Веб-шрифти, Розмір вікон, Медіа-запити, теги HTML5 ...)
  • Іноді не так просто встановити
  • Складний в масштабі

Варіант 3: Використовуйте PhantomJs і, можливо, бібліотеку обгортки

Плюси

  • Виконати Javascript
  • Досить швидко

Мінуси

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

Варіант 4: Використовуйте Chrome Headless і, можливо, бібліотеку для обгортки

Плюси

  • Виконати Javascript
  • Поруч ідеальна візуалізація

Мінуси

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

Відмова: Я є засновником ApiFlash. Я зробив усе можливе, щоб дати чесну та корисну відповідь.


2

Я в Windows, тому мені вдалося скористатися функцією imagegrabwindow, прочитавши тут підказку від Стефана. Я додав під час обрізання (щоб позбутися заголовка браузера, смуг прокрутки тощо) та зміни розміру, щоб отримати остаточне зображення. Ось мій код . Сподіваюся, що хтось допомагає.


1

webkit2html працює на Mac OS X та Linux, досить простий в установці та використанні. Дивіться цей підручник .

Для Windows можна перейти з CutyCapt , який має аналогічний функціонал.


2
@Smith: Востаннє я перевіряв, 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, який є дуже гнучким, і його можна викликати різними способами, наприклад, із заробітної плати або веб-сторінки 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якщо ні. Перевірте документацію на деталі .


Якщо ви шукаєте скріншоти на повну сторінку, для цього постачальника потрібна професійна підписка (170 доларів США / рік).
chaoskreator

1

Днями я написав швидкий і брудний додаток для цього за допомогою API Google. Звичайно, сфера вдосконалення ...

  • Він використовує останню версію API API Google 5.
  • Розмір зображення зараз шириною 500 пікселів
  • Підтримує перегляд на робочому столі та мобільних пристроях
  • Збережіть у файлі у визначеній папці
  • Включити рудиментарну систему кешу

Знайдіть його тут, використовуючи демо-версію та код наживо .

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


0

Я використав page2images . Це розроблена основа на cutycapt, яка дійсно швидка і стабільна. Якщо ви не хочете витрачати занадто багато часу на продуктивність та конфігурацію, вам слід скористатися цим. Якщо ви перейдете на їхній веб-сайт, ви можете знайти більше деталей та зразок 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 речі.

Використовуйте Puppeteer

Ви можете використовувати пакет PHP Puppeteer, щоб запустити браузер і зробити знімок екрана.

Використовуйте API

Існує багато API скріншотів. Ви можете, наприклад, поглянути на ScreenshotAPI.net . (Відмова я творець цього API)


-1

Не безпосередньо. Програмне забезпечення, таке як Selenium, має такі функції, як і вони можуть керуватися PHP, але мають інші залежності (наприклад, запуск свого Java-сервера на комп'ютері за допомогою браузера, на який ви хочете зробити знімок екрана)


Зараз для нього доступно багато бібліотек PHP. Не зовсім бібліотека "PHP". Залучає деякі js-браузер та коди.
Gijo Varghese


-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.