Можно ли передать html всего документа со всеми вычисленными стилями на сервер, чтобы получить рендеринг PhantomJS и сохранить его в PNG? (аналогично html2canvas)
Чего я пытаюсь добиться, так это использовать PhantomJS, чтобы сделать снимок экрана веб-страницы (в ее текущем состоянии). Таким образом, такие вещи, как модальный диалог, нажатые вкладки, будут на скриншоте.
Вы не можете передать вычисляемые стили, так как они отсутствуют в DOM. Это свойство узлов DOM при применении CSS. Чтобы это работало, вам нужно сделать каждый стиль доступным для сервера, например, когда доступ к таблицам стилей контролируется, серверу потребуется дополнительно войти в систему или что-то в этом роде. Хотя это должно быть редко.
Наверное, было бы достаточно отправить
document.documentElement.outerHTML
на сервер и позволить PhantomJS отображать полученный HTML
var page = require('webpage').create();
page.onLoadFinished = function(status){
page.render("page.png");
phantom.exit();
};
page.content = "received HTML as string"
.replace(/href="\/\//g, 'href="http://')
.replace(/href=\/\//g, 'href=http://');
Иногда ресурсы (таблицы стилей) не имеют протокола в своем URL-адресе, но PhantomJS требуется протокол http при загрузке локальных страниц (настройка page.content), в противном случае предполагается, что URL-адрес использует file:// вместо http://.
Вам может понадобиться запустить PhantomJS с некоторыми параметрами командной строки, такими как --ssl-protocol=tlsv1 или --local-to-remote-url-access=true.
