Задать вопрос
@Mikhail555
javascript

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

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

Подойдет любой способ, как выполнением javascrpt'a в клиентской части, так и выполнение php-скрипта в серверной части. Подключение сторонней библиотеки тоже подходит. Использование стороннего ресурса вроде www.s-shot.ru или ему подобного, а так же установка приложения/расширения в браузер не подойдут. Подскажите в какую сторону копать? Гугл выдает только библиотеку html2canvas.js!
  • Вопрос задан
  • 8166 просмотров
Комментировать
Подписаться 6 Оценить Комментировать
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
codepen.io/iiil/pen/Gpkgj
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 4
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
phantom.js на сервере, который будет рендрить ваши странички и генерить превьюшки. html2canvas.js штука забавная, и пожалуй единственная альтернатива (ну еще wkhtmltoimage), но не слишком надежно это дело делать на клиенте.
Ответ написан
Комментировать
Комментировать
OlegTar
@OlegTar
программист .NET, Javascript, Perl
можно сделать с помощью браузера 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
Ответ написан
6 комментариев
6 комментариев
doodoo
@doodoo
Можно воспользоваться вот этим: html2canvas
Тут есть примеры
Ответ написан
1 комментарий
1 комментарий
@Soronorus
программист php, системный администратор
если у вас 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);
профит
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Сделать тг бота для сбора 4 данных в эксель + проверка на подписку
26 апр. 2024, в 19:17
1000 руб./за проект
Написать видео сцену на unity с картой
26 апр. 2024, в 19:12
5000 руб./за проект
Ещё заказы