Как в командной строке сделать скриншот сайта (с поддержкой JavaScript и lazy download)

Краткое содержание статьи:

1. Вы можете сделать скриншот веб-сайта в командной строке с помощью безголового веб-браузера — в статье подробно описано как это сделать
2. Если вам не хочется возиться с установкой и настройкой, то вы можете сделать скриншот веб-сайтов (в том числе на JavaScript и с lazy download) используя онлайн сервис: https://suip.biz/ru/?act=screenshot

Как в Linux сделать скриншот сайта

Если нужно сделать скриншот страницы веб-сайта в командной строке, то нужно помнить о следующем:

1) Современные веб-сайты активно используют JavaScript и генерируют DOM веб-страницы уже в веб-браузере. То есть исходный HTML может не дать представление о внешнем виде веб-страницы если в нём не отработал JavaScript код

Про HTML DOM и как его просмотреть и сохранить без использования командной строки смотрите в статье: Как сохранить весь HTML DOM в его текущем состоянии

2) Некоторые веб-сайты используют lazy download картинок и даже частей веб-страницы — это технология, которая ускоряет первичную загрузку и показ веб-страницы, подгружая необходимые элементы по мере того, как пользователь скролит веб-страницу. То есть нужна не просто поддержка JavaScript, нужно ещё и эмулировать скроллинг веб-страницы

Предыдущие два пункта наводят на мысль, что намного проще сделать скриншот открыв веб-сайт в веб-браузере. Если нужен скриншот всей страницы, части которой могут выходить за пределы монитора (окна), то вдруг оказывается, что «просто открыть веб-сайт и сделать скриншот» уже не так-то и просто.

3) Итак, к уже сказанному, нам нужно добиться того, чтобы на скриншот попадала вся веб-страница, в том числе области за пределами окна.

4) Всякое по мелочи, например, ожидание загрузки изображений перед тем как сделать скриншот (даже без lazy download, изображения загружаются не мгновенно — это нужно учитывать при автоматизации создании скриншотов).

Смотрите также: Как сделать скриншоты всей страницы сайта в Google Chrome без использования плагинов

Как в Puppeteer сделать скриншот веб-сайта с lazy download

С приведённым выше техническим заданием сможет справиться только безголовый веб-браузер, например, Puppeteer.

Установите Puppeteer — как это сделать описано на странице https://kali.tools/?p=7406 (раздел «Установка Puppeteer»).

Создайте файл get-screenshot.js и скопируйте в него следующее:

puppeteer = require('puppeteer');

name = 'screenshot';
t = 'jpg'; //OR png OR jpg OR webp
q = '80';

function delay(time) {
	return new Promise(function(resolve) { 
		setTimeout(resolve, time)
	});
}
async function run() {	
	const url = process.argv[2];

	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	const customUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';

   
	await page.setViewport({width: 1440, height: 3440});
	await page.setUserAgent(customUserAgent); 
	await page.goto(url, {waitUntil: 'load', timeout: 0});

	const height = await page.evaluate(() => {
		return document.body.scrollHeight;
	});

	window_h = page.viewport().height
	step = height / window_h + 1
	for (let i = 0; i < step; i++) {
		current_height = window_h * i
		await page.evaluate((current_height) => {
			window.scrollTo(0, current_height);
		}, current_height);
		await delay(500);
	}	
	
	await delay(3000);
	
	file_name = name + '.' + t;
	
	let obj_arguments = {};
	if (t == 'png' || t == 'webp')
	{
		obj_arguments = {path: file_name, fullPage: true};
	}
	else
	{
		obj_arguments = {path: file_name, fullPage: true, quality: q};
	}

	await page.screenshot({...obj_arguments});	

	browser.close();
}

run();

Запустите следующим образом:

node get-screenshot URL

К примеру, следующая команда создаст скриншот страницы https://zalinux.ru/?p=9820:

node get-screenshot 'https://zalinux.ru/?p=9820'

Пример созданного скриншота (кликните по картинке для просмотра скриншота в полном размере):

Приведённый выше код:

1. Загружает веб-страницу и запускает JavaScript, дожидается окончания формирования DOM
2. Плавно прокручивает веб-страницу, попутно дожидаясь прогрузки изображений
3. Ожидает загрузки всех элементов и сохраняет скриншот веб-сайта

Вы можете выбрать один из трёх форматов изображения: png, jpg, webp. В моих тестах формат WebP оказался самым проблемным — для больших страниц вместо скриншота может быть сохранён пустой файл. С другими форматами этой проблемы не наблюдается.

Смотрите также: Что такое файл WebP и чем он лучше других форматов

Вы также можете изменить имя и путь до файла, куда будет сохранён скриншот.

Для форматов JPG и WebP вы можете изменить уровень сжатия: укажите число от 1 до 100 — чем меньше число, тем меньше размер файла, но и хуже качество изображения.

Для проблемных сайтов, которые требуют времени для загрузки и формирования страницы, вы можете изменить тайминги. Например, по умолчанию время между прокрутками экрана установлено на 500 (полсекунды) — вы можете увеличить этот интервал. Аналогично с паузой перед созданием скриншота, которая установленна на 3000 (3 секунды) — вы можете увеличить это значение. Или наоборот уменьшить, если вы делаете скриншоты простых и лёгких страниц.

Также вы можете экспериментировать с размером окна веб-браузера (width: 1440, height: 3440).

На самом деле, идеальных параметров, которые лучше всего подходили бы под любую веб-страницу, не существуют — вы можете самостоятельно подобрать их под ваши нужды.

Например, настоящим вызовом стал скриншот следующей страницы: https://pattaya-pages.com/baiyoke-sky-and-baiyoke-observation-deck-the-best-observation-deck-on-top-of-a-skyscraper-in-bangkok/

Но в конечном счёте это удалось — главным ключом к успеху стало значительно увеличение пауз при прокрутки страницы.

В результате был создан следующий скриншот (кликните по картинке для просмотра скриншота в полном размере):

Простой способ сделать скриншот всей страницы сайта даже за пределами экрана

Если вы не хотите возиться с установкой и настройкой Puppeteer, то вы можете воспользоваться бесплатным онлайн сервисом: Создание полного скриншота веб-сайтов независимо от размер веб-страницы, даже если страница формирует JavaScript

Всего в пару кликов вы можете сделать скриншот всей страницы сайта, даже если она уходит далеко за пределы экрана, даже если сайт использует JavaScript и lazy download. Достаточно просто ввести адрес страницы, для которой вы хотите сделать скриншот.

Перейдите на страницу сервиса: https://suip.biz/ru/?act=screenshot

Вы увидите настройки захвата скриншотов — не переживайте, всё можно оставить по умолчанию. Нужно только ввести адрес веб-страницы и нажать на кнопку «Отправить».

К примеру, я хочу сделать скриншот страницы https://zawindows.ru/%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%BF%D0%BE-hdr-%D0%BA%D0%B0%D0%BA-%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D1%8C-%D0%BA/

Создание скриншота может занять некоторое время — будьте терпеливыми.

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

Пример скриншота (кликните по нему для просмотра полного размера):

Также вы можете поставить галочку рядом с настройкой «Скачать?» и скриншот будут сразу скачен вам на компьютер или телефон.

Вы можете изменить настройки ширины и высоты окна веб-браузера. Дело в том, что различные сайты выглядят по-разному на экранах разного размера. Меняя настройки ширины и высоты, вы можете изменить внешний вид сайта на скриншоте.

Дополнительно вы можете выбрать один из трёх форматов файлов: JPG, PNG, WEBP.

Для форматов JPG и WEBP вы можете установить качество изображения от 1 (самый маленький размер файла, но и худшее качество) до 100 (лучшее качество, но большой размер файла).

В целом всё довольно просто — менять настройки необязательно. Если внешний вид скриншота вас не устраивает (например, размер экрана слишком большой по сравнению с шириной веб-сайта) или вам нужно изображение занимающее меньше места, вы можете поэксперементирвоать с настройками — никакой платы и никаких ограничений на этом сервисе нет.

Как сохранить сайт в PDF. Онлайн сервис сохранения веб-страницы в PDF

Кстати, если вы хотите сохранить веб-страницу не в виде скриншота, а в PDF документ, то аналогичный сервис с большим количеством настроек может сохранить в PDF даже динамически генерируемые веб-сайты:

• Сохранить любую веб-страницу в PDF (поддержка JavaScript)

Смотрите также:

• Как сохранить веб-страницу в формате PDF в Google Chrome
• Как сохранить веб-страницу в формате PDF в Mozilla Firefox (на Windows, Mac, Linux)