PhantomJS: масштаб Webkit-Transform заставляет страницу перемещаться за пределы области просмотра - PullRequest
Новая
       23

PhantomJS: масштаб Webkit-Transform заставляет страницу перемещаться за пределы области просмотра

3 голосов
/ 24 января 2012

Я пытаюсь сгенерировать большие png скриншоты веб-страниц, используя PhantomJS, который построен на основе webkit.У меня есть приложение, генерирующее скриншоты просто отлично (используя их raster.js пример .) Но я хочу, чтобы текст был больше (а не 12-16px) - мне все равно, когда изображения становятся зернистыми,Я думал, что мог бы просто масштабировать / увеличивать веб-страницу, делая что-то вроде: 

document.documentElement.style.webkitTransform = "scale(2.0)";

Но это заставляет содержимое страницы выходить из области просмотра.Вы можете увидеть это, если оцените эту строку кода в Chrome.Можно ли масштабировать всю веб-страницу (дублируя функциональность браузера "Ctrl +") в JavaScript / Phantom.js?

Мой текущий скрипт phantom.js выглядит следующим образом: 

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 1280, height: 1024 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            page.evaluate(function () {
                document.body.style.webkitTransform = "scale(2.0)";
            });
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Ответы [ 2 ]

2 голосов
/ 03 октября 2012

Попробуйте 

page.zoomFactor=2.0;

Свойство webkitTransform CSS не будет делать то, что вы хотите, с или без установки источника. Во-первых, он не меняет размеры элементов (т. Е. Не происходит ретрансляция, элемент (ы) масштабируются в пределах их текущих ограничивающих рамок).

0 голосов
/ 12 мая 2012

Обновление

Вы забыли установить свойство CSS transform-origin, поэтому ваш контент расширяется наполовину вверх и наполовину (по умолчанию 50% 50%), а верхняя часть скрывается.

Поэтому установите его на 0% 0%, чтобы преобразование происходило только вниз и вправо: 

document.body.style.webkitTransformOrigin = "0% 0%";

Вам также нужно будет установить ширину тела на 50%, чтобы она не заканчивалась вдвое больше, чем ваша область просмотра: 

document.body.style.width = "50%";

Старый ответ - не обращать внимания

Это разрешает только вертикальное выравнивание

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

Используйте это как функцию удвоения, и все будет в порядке: 

page.evaluate(function() {
    var h = $('body').height();
    $('body').css('position', 'relative');
    $('body').css('top', h/2 + 'px');
    $('body').css('-webkit-transform', 'scale(2.0)');
});

В любом случае помните, что getBoundingClientRect() и page.clipRect ведут себя странно при работе с этим преобразованием.

...