Search code examples
phpphantomjshtml2canvasvis.js

How to take a page capture which includes a timeline made with vis.js


I am generating a word report using php.

I need to include a picture of a timeline made with the vis.js library by taking a screenshot from that php script.

I have tried to use PhantomJS with php-phantomjs. I am able to render the page except that the div section containing the timeline is not present (I have the other elements). Using that library I am able to generate screenshots for other libraries such as D3js and Chart.js. It is with vis.js that I have the problem...

I have also tried html2canvas. But from what I have seen and done, the only way to take a screenshot is to open the page in a browser, and that I don't want.

What does need to be done to achieve what I want?


Solution

  • For some reason PhantomJS gives an error when loading a Timeline. I've created an issue to figure out the cause of this problem:

    https://github.com/almende/vis/issues/1170

    EDIT: found the cause.

    PhantomJS uses an old rendering engine which doesn't support ES5 function bind. To solve it, load ES5-shim in your webpage first:

    <!-- load ES5 shim needed to run on old browsers IE8 and PhantomJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.10/es5-shim.min.js"></script>