Обрезка экрана PhantomJS размером до содержимого

PhantomJS отлично справляется с захватом веб-страниц в файлы изображений для меня. Я использую script на основе rasterize.js.

Однако для некоторых веб-элементов фиксированного размера мне нужно, чтобы получившееся изображение соответствовало размеру веб-элемента.

например. У меня есть такая страница:

<html>
<body>
    <div id="wrapper" style="width:600px; height:400px;">
       Content goes here...
    </div>
</body>
</html>

В этом примере мне нужно создать изображение размером 600x400. Это способ получить размер видового экрана динамически на основе веб-элемента на странице, которую я растеризую.

Я знаю, что это непросто... Идеи?

Спасибо

Ответы

Ответ 1

Ого. В конце концов, это не так сложно. Просто установите видовое окно действительно большим и используйте функцию cropRect. Какой замечательный инструмент!

Моды для rasterize.js:

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        var height = page.evaluate(function(){
            return document.getElementById('wrapper').offsetHeight;
        }); 
        var width = page.evaluate(function(){
            return document.getElementById('wrapper').offsetWidth;
        }); 
        console.log('Crop to: '+width+"x"+height);

        page.clipRect = { top: 0, left: 0, width: width, height: height };
        window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
    }
});