«Ха-ха, — скажете вы, — нет ничего проще. Открываем страницу в браузере, жмем Print Screen и вставляем изображение в графическом редакторе. Вуаля!» Однако:
- Эту операцию иногда хотелось бы автоматически повторить несколько раз.
- На полученный результат влияет множество факторов:
- Текущий размер окна браузера.
- Разрешение вашего монитора. Например, он FHD, а вам понадобилась картинка в 4K.
- Масштабирование в системе и в браузере.
- Иногда хотелось бы задать размер окна браузера с точностью до пиксела. Попробуйте это сделать с помощью мышки и вы проклянете все на свете.
- Иногда хотелось бы иметь прозрачный фон в полученном графическом файле.
Достаточно? Итак,
- Устанавливаем Google Chrome, если он у вас еще не стоит. Поскольку возможность сохранения графических файлов появилась только в 59-й версии, может быть придется обновить свой Chrome до более позднего.
- Находим исполняемый файл Chrome. В моем случае его путь «C:\Program Files\Google\Chrome\Application\chrome.exe». Как вы могли понять, он в 64-бит варианте, но все также отлично работало и раньше, когда он был 32-битным «C:\Program Files (x86)\Google\Chrome\Application\chrome.exe».
- Создаем рабочий каталог, полное имя которого не содержит специальных символов и пробелов. У меня он будет «C:\Temp». Такие же имена нужно использовать для всех остальных файлов в этой задаче.
Пример 1: Конвертировать веб-страницу
Получить скриншот той самой страницы, которую вы сейчас просматриваете, в разрешении 4K:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --window-size=3840,2160 --screenshot="C:\Temp\software-html-to-graphic.png" "https://sjohnru.wordpress.com/software/software-html-to-graphic/"
Или та же самая командная строка в формате командного файла Windows, который позволит нам использовать перенос строк.
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^ --headless ^ --disable-gpu ^ --window-size=3840,2160 ^ --screenshot="C:\Temp\software-html-to-graphic.png" ^ "https://sjohnru.wordpress.com/software/software-html-to-graphic/"
Что это все означает?
--headless— дает возможность выполнить команду, а не просто открыть браузер.--disable-gpu— магическое заклинание. С ним точно все работает, без него может и не работать.--window-size=3840,2160— очевидно.--screenshot="C:\Temp\software-html-to-graphic.png"— куда сохранить результирующий файл. Обратите внимание, что всегда задается полный путь. Если вы оставите только имя файла без указания каталога, то Chrome попытается сохранить его в свой инсталляционный каталог, где у него нет прав на запись, в результате он грохнется. Из графических форматов поддерживаются по крайней мере JPEG, PNG и WebP."https://sjohnru.wordpress.com/software/software-html-to-graphic/"— просто скопируйте сюда URL из строки вашего браузера.
Пример 2: Конвертировать HTML файл
Создаем текстовый файл с следующим содержимым:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
::-webkit-scrollbar { display: none; }
</style>
</head>
<body>
Hello, world.
</body>
</html>
Сохраняем его как «C:\Temp\hello-world.html » и выполняем команду:
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^ --headless ^ --disable-gpu ^ --window-size=320,240 ^ --screenshot="C:\Temp\hello-world.png" ^ --default-background-color=0 ^ "file:///C:/Temp/hello-world.html"
::-webkit-scrollbar { display: none; }— запретить показывать полосы скроллирования.--default-background-color=0— задать прозрачный фон."file:///C:/Temp/hello-world.html"— обратите внимание, что адрес HTML файла задается в формате URL. И путь к нему всегда должен быть полным, вам недостаточно указать только имя файла.
hello-world.png с установленным
--default-background-color=0 и без него
S John 