Как создать скриншот с сайта или HTML с PhantomJS в Node.js

PhantomJS — это автономный сценарий WebKit с мультиплатформой JavaScript API, доступный в таких основных операционных системах, как: Windows, Mac OS X, Linux и другие Unices. Он имеет быструю и встроенную поддержку различных веб-стандартов: обработка DOM, селектор CSS, JSON, Canvas и SVG.

В этой статье вы узнаете, как управлять интерфейсом командной строки PhantomJS с помощью Node.js с помощью модуля webshot.

Требования

Вам понадобится PhantomJS (установленный или автономный дистрибутив), доступный из PATH (здесь вы узнаете, как добавить переменную в PATH в окнах). Если он не доступен по пути, вы можете указать исполняемый файл для PhantomJS в конфигурации позже.

Вы можете получить PhantomJS из следующего списка на каждой платформе (Windows, Linux, MacOS и т. Д.) в разделе загрузки официального сайта здесь.

Замечания: на большинстве платформ нет процесса установки, так как вы получите .zip файл с двумя папками, Примеры а также бункер (который содержит исполняемый файл PhantomJS).

Реализация

PhantomJS — это инструмент командной строки (CLI), поэтому нам нужно использовать эту утилиту с Node.js, используя дочерний процесс. Тем не менее, мы не будем изобретать велосипед, и вы также, чтобы упростить эту задачу для нас, используйте сторонний модуль, в данном случае мы говорим о Узел-WebShot модуль. Node Webshot предоставляет простой API для создания скриншотов веб-страниц. Модуль представляет собой легкую оболочку для PhantomJS, которая использует WebKit для выполнения рендеринга страницы.

Чтобы установить этот модуль в свой проект, выполните следующую команду в своем терминале:

npm install webshot

Замечания: тем не менее, модуль webshot имеет предустановленный фантом, включенный в качестве зависимости, расположенный в your-project/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs.exe и он автоматически используется, если не предоставлен phantomPath, поэтому использование webshot будет работать без какой-либо настройки.

Сохраните его в своем проекте, если вам нужно использовать --save параметр, после установки вы сможете потребовать модуль с помощью require('webshot'),

Как упоминалось ранее, вам нужно, чтобы phantomjs были доступны из командной строки, в противном случае укажите полный путь к исполняемому файлу, указав phantomPath опция:

var webshot = require('webshot');
var options = {
phantomPath: "C:\\Users\\sdkca\\Desktop\\phantomjs-2.1.1-windows\\bin\\phantomjs.exe"
};
// Use webshot here with the options object as third parameter
// Example :
webshot('google.com', 'google.png', options, (err) => {
// screenshot now saved to google.png
});

Webshot пытается использовать двоичный файл, предоставленный модулем NPM phantomjs, и возвращается к phantomPath если модуль недоступен.

Создать скриншот с сайта

Вы можете создать скриншот с любого веб-сайта, просто укажите URL-адрес веб-сайта в качестве первого параметра и выходной файл в качестве второго параметра:

var webshot = require('webshot');
webshot('site.com', 'ourcodeworld-image.png', options, (err) => {
if(err){
console.log("An error ocurred ", err);
}
// screenshot now saved to ourcodeworld-image.png
});

Создать скриншот из HTML-файла или простой HTML-строки

Вы можете создать снимок экрана из строки html, просто укажите разметку в виде строки в первом параметре, имя выходного файла — в качестве второго параметра и укажите в параметрах, которые вы используете обычный html:

var webshot = require('webshot');
var options = {
siteType:'html'
};
webshot('Hello World', 'hello_world.png', options, (err) => {
// screenshot now saved to hello_world.png
});

Вы можете создать скриншот из HTML-файла, установив siteType для файла и укажите в качестве первого параметра функции webshot абсолютный путь к файлу:

var webshot = require("webshot");
var options = {
siteType: "file"
};
webshot("index.html", "ourcodeworld-file.png", options, (err) => {
if(err){
return console.log(err);
}
console.log("Image succesfully created");
});

Кроме того, вы можете прочитать содержимое файла с помощью модуля файловой системы и установить siteType в HTML:

var webshot = require('webshot');
var fs = require("fs");
var options = {
siteType:'html'
};
webshot(fs.readFileSync("index.html", "UTF-8"), 'hello_world.png', options, (err) => {
// screenshot now saved to hello_world.png
});

Вы можете установить дополнительные параметры в объекте, см. Доступные параметры в Документы хранилища здесь.

Изменить формат скриншота

Сгенерированный формат скриншотов может быть png, jpg или же jpeg, Чтобы изменить формат вывода, установите streamType со строкой в ​​формате (кроме того, обратите внимание, что выходное имя файла должно иметь такое же расширение):

var webshot = require("webshot");
var options = {
streamType: "jpeg"
};
webshot("site.com", "ourcodeworld-file.jpeg", options, (err) => {
if(err){
return console.log(err);
}
console.log("Image succesfully created");
});

Варианты Webshots

Таким же образом, как вы делаете с CLI PhantomJS, вы можете динамически устанавливать параметры в объекте для модуля webshot (и для PhantomJS). В следующей таблице приведены все доступные параметры для Webshot и PhantomJS:

{ширина: 1024
, высота: 768}

{ширина: 'окно'
, высота: 'окно'}

{осталось: 0
справа 0
, верх: 0
внизу: 0}

PhantomJS обратные вызовы

Произвольные сценарии могут быть запущены на странице до ее визуализации с помощью любого из обратных вызовов страницы Phantom, таких как onLoadFinished или onResourceRequested. Например, приведенный ниже скрипт изменяет текст каждой ссылки на странице:

var webshot = require('webshot');
var options = {
onLoadFinished: function() {
var links = document.getElementsByTagName('a');
for (var i=0; i {
// screenshot now saved to google.png
});

Обратите внимание, что сценарий будет сериализован, а затем передан в Phantom в виде текста, поэтому вся информация переменной области будет потеряна.