Статьи

Принимая веб-страницы скриншоты

Декабрь 1, 2018

Недавно я работал над системой, которая требует делать скриншоты веб-страницы. Не только скриншот всей страницы, но и конкретного элемента.

Глядя в сети, я нашел много решений для этой проблемы, которые можно классифицировать по категориям:

  • Локальные приложения : я имею в виду программу захвата экрана или плагин для вашего браузера (и для Chrome, и для FireFox есть несколько хороших плагинов для этого).
  • Онлайн сервисы : Есть некоторые интернет — услуги , которые предлагает возможность получить скриншоты (как url2png ), проверить свой веб — сайт в различных браузерах (например , BrowserShots  или browserling ) или даже API автоматизировать задачу захватить веб — страницу (как thumbalizer или url2png ).

Решение

Есть альтернативы, но мне нравится выходить за рамки простых решений и пробовать что-то, поэтому, посмотрев немного больше, я нашел мощное решение:  PhantomJS .

О, замечательно, но .. что такое PhantomJS и для чего он хорош?

Как сказано на странице проекта:

PhantomJS — это безголовый WebKit с JavaScript API. Он имеет  быструю  и  встроенную  поддержку различных веб-стандартов: обработка DOM, селектор CSS, JSON, Canvas и SVG.
PhantomJS создан  Арией Хидаят .

Это означает, что у вас есть все возможности браузера, основанного на WebKit, в программе, поэтому вы можете использовать его для: автономного тестирования сайта, просмотра сайта, рендеринга страниц, мониторинга сети,…

Как использовать PhantomJS для создания скриншота веб-страницы?

Перейдите на страницу проекта и загрузите бинарный пакет. В моем случае я загружаю 64-битную систему Linux.

PhantomJS — это инструмент командной строки, и, разархивировав предыдущий пакет, вы найдете его в bin / phantomjs. В качестве командного инструмента использование выглядит следующим образом:

./phantomjs [options] script.[js|coffee] [script argument [script argument ...]]

 

Вы можете получить больше информации об использовании с: ./phantomjs —help

PhantomJS принимает программы, написанные на JavaScript или CoffeeScript, и, надеюсь, пакет поставляется с папкой примеров, которая полна примеров на обоих языках.

Одна из примеров программ — растеризация. [Js | coffee], которая показывает, как мы можем растеризовать веб-страницу в файл изображения.
Использование программы:

./phantomjs rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]

 

И весь программный код:

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Вероятно, самые важные предложения:

  • Включение модуля веб-страницы: 
    var page = require('webpage').create();
  • Загрузите веб-страницу с открытой функцией: 
    page.open(address, function (status) { ...};
  • Рендеринг веб-страницы в файл с функцией рендеринга: 
    page.render(output);

Обратите также внимание на то, что в исходном коде rasterize.js page.viewportSize определен как 600×600, что эквивалентно навигации по странице с разрешением экрана 600×600.

Позволяет увидеть образец и сделать снимок экрана этого блога:

./bin/phantomjs ./examples/rasterize.js http://acuriousanimal.com/blog acanimal_blog.png

Это делает скриншот всего блога сайта. Здесь я приложил модифицированную версию изображения с гораздо меньшим разрешением оригинала, но вы можете получить представление о мощном PhantomJS .:

 

34
Share: