Замена iframe на js?

Question

[Кирилл Горелов]

Парни, хочу сделать скриншотер страниц сайта(попрактиковаться хочу).
Сам скриншотер реализую через html2canvas. А вот страницу как подгрузить не знаю.
Когда использую iframe, то на скриншоте ничего не отображается. Я пробовал и саму страницу скринить и отдельные блоки. Содержимое Iframe никак не отображается.
Как мне можно сделать так, что содержимое стороннего сайта попало в скриншот?
То есть как мне загрузить сторонний сайт к себе на страницу и заскриншотить его?

Comments

[Сергей Соколов]

может, лучше через phantomjs?

[hOtRush]

Сергей Соколов, phantomjs ничем не лучше - миллиард багов и уже не мэинтэйнится какое-то время.
Сайт можно запретить показывать во фрейме например с помощью заголовка x-frame-options: SAMEORIGIN.
Непонятно зачем нужен ифрейм, нельзя просто получить html через обычный get запрос?

[Сергей Соколов]

hOtRush, что значит «не мэинтэйнится какое-то время»? Последний коммит в phantomjs – от 25 июня сего года. Такой вариант снимает все ограничения вроде Same Origin. Принимаете URL'ы в очередь и в один поток неспеша на сервере рендерите в картинки..

[Кирилл Горелов]

hOtRush, Получить можно, но он грузить без стилей, а мне нужно со стилями. И я вот пока ни как не соображу как сделать.

[Кирилл Горелов]

Сергей Соколов, Такой вопрос, не подскажешь?
Ни когда им просто раньше не пользовался и возникают вопросы.
Это js библиотека?
Как ей пользоваться, скачал библиотеку, Вставил код, который там есть в примере и дальше что, как выполнить скрипт?
Не сочти меня за дурака, просто не особо понял в мануале как пользоваться.

[Сергей Соколов]

Кирилл Горелов, по ссылке, которую я приводил в начале, прямо пример, как сохранить в картинку вид Главной github'а. Нужно скачать фантом, создать js-файл с 5 строчками из примера, и запустить.

phantomjs – это не библиотека, это webkit браузер, управляемый через JavaScript API..

[Кирилл Горелов]

Сергей Соколов, Хорошо, а где мне писать эту команду "phantomjs github.js"?
И я как понял он выполняется исключительно в браузере, выполняться по крону он не будет?

[Сергей Соколов]

Кирилл Горелов, писать в командной строке. Вы под Windows? Тогда должны были скачать phantomjs.exe

На Linux сервере можно и по крону запускать, если вам нужно обновлять скриншот сайта.

[Кирилл Горелов]

Сергей Соколов, нет, у меня linux
должен зайти в папку с phantomjs cd /home/phantomjs
И дальше выполнить ту команду, которую писал?

[hOtRush]

Сергей Соколов, https://www.reddit.com/r/programming/comments/654x... chrome headless пока тоже сыроват, но уже в разы лучше и стабильней phantomjs.

[Сергей Соколов]

Кирилл Горелов, именно так.

[Кирилл Горелов]

Сергей Соколов, Пиши полноценный ответ, я тебе плюсану. Я установил и запустил, буду изучать теперь api.
Хотя если не сложно подскажешь, как мне теперь запускать этот скрип через браузер и передать в него параметры, к примеру размер и расширение картинки?

[hOtRush]

Сергей Соколов, советую попробовать вот эту штуку от разработчиков dev tools https://github.com/GoogleChrome/puppeteer

Answer 1

[Сергей Соколов]

Попробуйте сохранять вид сайта в картинку через PhantomJS – по ссылке пример, как сохранить главную страницу github в файл png.

Нужно скачать PhantomJS, создать js-файл с 5 строчками из примера, и запустить из командной строки примерно так: phantomjs github.js

PhantomJS – это не JS-библиотека, это Webkit браузер, управляемый через JavaScript API. Как заметил hOtRush Google также анонсировал «безголовую» версию своего браузерного движка Chromium, в связи с чем проект PhantomJS может потерять актуальность. Тем не менее, пока он вполне рабочий, и обновляется сообществом разработчиков (последний коммит на сегодня – двухмесячной давности, от 25 июня 2017).

Вы можете установить PhantomJS на своем сервере и вызывать его через exec() из php-скрипта, принимающего URL сайта, который надо перевести в картинку. Это самый простой вариант. Минус – в том, что PhantomJS жрёт много памяти, и если несколько посетителей запросят одновременно несколько заданий, памяти на всех может не хватить. В таком случае организуйте асинхронную очередь задач. Поступающие запросы с URL ставьте в очередь, которая последовательно обрабатывается всего одним процессом phantomjs. По мере готовности, заказчики смогут забрать готовые картинки сайтов.

Comments

[Кирилл Горелов]

Хорошо, спасибо. Буду обдумывать эти варианты)