PhantomJS преобразования HTML в JPEG: Изображение отрезанные

Question

Я пытаюсь преобразовать страницу HTML в формате JPEG с использованием phantomjs и выходное изображение обрезается в нижней части (изображение не отображается полный HTML страницы) ,

PhantomJS

Вот мой код rasterize.js

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

    address = system.args[1]; 
    output = system.args[2]; 

    page.open(address, function (status) { 
     if (status !== 'success') { 
      console.log('Unable to load the address!'); 
      phantom.exit(1); 
     } else { 
      window.setTimeout(function() { 
       page.render(output); 
       phantom.exit(); 
      }, 200); 
     } 
    }); 

и я запустить его следующим образом:

phantomjs ./rasterize.js ./test.html ./test.jpg 

HTML

HTML-страница, которую я пытаюсь экспортировать, использует jointjs, которая рисует SVG на странице, так что она содержит тег <svg>, а также теги <g>, а затем добавьте некоторые нормальные <div>, <table> и т. Д. Теги.

Вот несколько примеров из страницы HTML:

... 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="v-2" width="3100" height="1101" visibility="shown"> 
<defs id="v-4"> 
<linearGradient id="linearGradientv-2-107112646"> 
<stop offset="0%" stop-color="rgb(228,234,243)" stop-opacity="1"/> 
<stop offset="60%" stop-color="rgb(201,212,231)" stop-opacity="1"/> 
</linearGradient> 
... 
<g id="j_1" model-id="86b320b6-0e8a-4dee-8258-e329b97c04ea" class="element custom Device" magnet="false" fill="#FFFFFF" stroke="none" transform="translate(50,100)"> 
<g class="rotatable" id="v-6" transform="rotate(0,150,20)"> 
<g class="scalable" id="v-47" transform="scale(2,0.16)"> 
<rect class="body" id="v-13" fill="url(#linearGradientv-2-107112646)" width="150" height="250" stroke="black"/> 
</g> 
... 
</svg> 

HTML-страницу ввода, при просмотре в браузере, имеет всю страницу в представлении/ничего не обрезается в HTML странице.

Изображение

Полученное изображение показывает <table> со страницы HTML, но это отрезать! Вся таблица должна показать. Он должен подниматься до «e», вместо этого он отсекает одну из строк «d». В реальной HTML-страницы (если смотреть в браузере), таблица правильно показано и идет до «е»:

Кто-нибудь знает, почему мое изображение обрезается?

Answer 1

Ну, это, как оказалось, проблема с объединением JS, а не с проблемой PhantomJS! Для тех, кто может это найти, я все равно отправлю решение.

Когда элемент перемещается или создается пользователем, его можно создать с холста. Поэтому я слушаю событие «mouse pointer up» и проверяю, не находится ли оно с холста. Если он выключен, я расширяю холст. Код JointJS теперь выглядит следующим образом:

paper.on('cell:pointerup', function(cellView, evt, x, y) { 
    if(x>(paper.options.width-150)) 
    { 
     paper.setDimensions((paper.options.width+200),paper.options.height); 
    }else if(y>paper.options.height) 
    { 
     paper.setDimensions(paper.options.width,(paper.options.height+200)); 
    } 
});