PhantomJS converting HTML to JPEG: Image is cut off

Question

I am trying to convert an HTML page to a JPEG using phantomjs and the output image is cut off at the bottom (image doesn't display full HTML page).

PhantomJS

Here's my code for 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);
        }
    });

and I run it as follows:

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

HTML

the HTML page I am trying to export uses jointjs which draws SVGs to the page so it contains a <svg> tag, as well as <g> tags, then add in some normal <div> , <table> , etc. tags.

Here's some examples from the HTML page:

...
<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>

The input HTML page, when viewed in a browser, has the entire page in view / nothing is cut off in the HTML page .

Image

The resulting image shows the <table> from the HTML page, but it's cut off! The entire table should show. It should go up to "e", instead it cuts off one of the "d" rows. In the actual HTML page (viewed in browser), the table is shown correctly and goes up to "e":

Does anyone know why my image is cut off?

Answer 1

Well, it turned out to be a jointJS problem and not a PhantomJS problem at all! For those that may find this, I'll still post the solution.

When an element is moved or created by the user, it can possibly be created off the canvas. So I listen to the "mouse pointer up" event and check if it's off the canvas. If it is off, then I expand the canvas. The JointJS code now looks like this:

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));
     }
});