Как сделать скриншот страницы html?

Question

[Mikhail555]

В общем есть сверстанные страницы html с прикрученными стиля css и т.д. шириной не менее 1024px и высотой не менее 2400px. Необходим способ вывести эти страницы в превью на другой странице, блоками шириной 250px с вертикальным скролом. Выводить либо скриншот страницы, либо напрямую транслировать код html прямиком в блок. Весь процесс необходимо автоматизировать, не подойдет в ручную скринить и выкладывать.

Подойдет любой способ, как выполнением javascrpt'a в клиентской части, так и выполнение php-скрипта в серверной части. Подключение сторонней библиотеки тоже подходит. Использование стороннего ресурса вроде www.s-shot.ru или ему подобного, а так же установка приложения/расширения в браузер не подойдут. Подскажите в какую сторону копать? Гугл выдает только библиотеку html2canvas.js!

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/Gpkgj

Comments

[Mikhail555]

Отличный вариант

Answer 2

[Сергей Протько]

phantom.js на сервере, который будет рендрить ваши странички и генерить превьюшки. html2canvas.js штука забавная, и пожалуй единственная альтернатива (ну еще wkhtmltoimage), но не слишком надежно это дело делать на клиенте.

Answer 3

[OlegTar]

можно сделать с помощью браузера phantomjs

делаете скрипт

var page = require('webpage').create();
page.open('http://www.ya.ru', function() {
  page.render('yaru.png');
  phantom.exit();
});

и вызываете вот так

phantomjs script.js

можно так написать script.js, чтобы он принимал параметры:

var system = require('system');
var args = system.args;
var url = args[0];

и вызывать так:

phantomjs script.js www.yandex.ru

phantomjs.org

либо напрямую транслировать код html прямиком в блок.

iframe

Comments

[Mikhail555]

iframe не подходит... он транслирует с настоящей шириной и получается что в блоке 250px получается страница 1024px выступающая за границу блока... в следствии чего, появляется горизонтальный скрол!!!

[OlegTar]

@Mikhail555 горизонтальный скролл можно убрать с помощью CSS!!!

[Mikhail555]

@OlegTar Да, но вся страница не влазит в 250px

[Viktor Vsk]

@Mikhail555 если страницы находятся на том же домене, то управлять css\js в айфреме можете из вызывающей страницы. Следовательно, можно пробовать сжать по ширине

[Сергей Протько]

@victorvsk это дикое извращение.

[Mikhail555]

@victorvsk Да это ОЧЕНЬ сильно жестко... тем более представляете менять css для каждой страницы, в ручную... а их может быть очень много!!!

Answer 4

[Damir Makhmutov]

Можно воспользоваться вот этим: html2canvas
Тут есть примеры

Comments

[A K]

Читайте вопрос

Answer 5

[Павел Смирнов]

если у вас vds
cutycapt.sourceforge.net
берем это оттуда
ставим на сервак
$file = sprintf('xvfb-run --server-args="-screen 0, 1024x768x24" /patch/CutyCapt --min-width=1280 --url=%s --out=\'%s\'', $url, $tmpfname);
exec($file);
профит