Скриншот phantomjs не масштабируется до содержимого страницы

У меня есть пара баннеров от клиента (например, ширина 160 пикселей и высота 600 пикселей), но когда я пытаюсь сделать снимок экрана, я вижу результат в виде изображения 400x600 с белым фоном (или черным, если файл результата JPEG) и баннер на левая сторона (около 160x600). Я не могу жестко закодировать viewPortSize, потому что все баннеры разные. Можно ли динамически установить viewPortSize или что-то еще, чтобы результирующее изображение было точно таким же, как баннер?

const page = require('webpage').create();
const system = require('system');
/**
 *  FIRST ARG - name of this runner
 *  SECOND ARG - input html file
 *  THIRD ARG - destination
 */
if (system.args.length !== 3) {
    console.log('Usage: phantomRunner.js [inputFile] [destination]');
    phantom.exit();
}
const inputFile = system.args [1];
const outputPath = system.args [2];

page.open(inputFile, function (status) {
    if (status !== 'success') {
        phantom.exit(1);
    } else {
        page.render(outputPath);
        phantom.exit();
    }
});

Я уже пытался уменьшить viewPortSize до 10x10, но это не помогло.

РЕДАКТИРОВАТЬ Я обнаружил, что невозможно изменить ширину браузера на размер меньше 360, и это проблема.


javascript phantomjs
person bearhunterUA    schedule 08.02.2017    source источник
comment
Я думаю, что на момент скриншота эти баннеры еще не отрендерены. Вам нужно установить некоторую задержку перед page.render   -  person MysterX    schedule 08.02.2017
comment
@MysterX нет ... он загружен, и я вижу рекламу, добавьте задержку на 1 секунду, но результат тот же   -  person bearhunterUA    schedule 08.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

получить изображение результата точно так же, как баннер?

Другими словами, вы хотите сделать скриншот только данного элемента. Здесь не полный скрипт для этого, а только важная часть.

var banner_id = system.args [1];

var b = page.evaluate(function (banner_id) {
    return document.getElementById(banner_id).getBoundingClientRect();
}, banner_id);

page.clipRect = {
    top:    b.top,
    left:   b.left,
    width:  b.width,
    height: b.height
};

page.render(system.args [2]);
person Vaviloff    schedule 08.02.2017
comment
Это хорошая идея, но я вставлю некоторый элемент div с banner_id между телом и первым дочерним элементом и сделаю то же самое, потому что я не знаю, что будет в баннере. Большое спасибо, было полезно! - person bearhunterUA; 09.02.2017