Html2canvas: facebook plugin comments

Question

I have a website witch uses facebook plugin comments. I'm looking for a way to have those comments inside a screenshot. If I use the simple html2canvas I get a blank box instead of them. So I try to use html2canvasproxy but now it print some javascript console log instead of the facebook comments.

It shoud be like but I get . I noticed that the html2canvasproxy.php saves the facebook plugin html correctly.

I can't find any javascript error in the console log.

I'm using the following code to take the screenshot:

html2canvas(document.body, {
    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
    "proxy":"js/html2canvasproxy.php",
    "onrendered": function(canvas) {
        var img = new Image();
        img.onload = function() {
            img.onload = null;
            document.body.appendChild(img);
        };
        img.onerror = function() {
            img.onerror = null;
            if(window.console.log) {
                window.console.log("Not loaded image from canvas.toDataURL");
            } else {
                alert("Not loaded image from canvas.toDataURL");
            }
        };
        img.src = canvas.toDataURL("image/png");
    }
});

And I have this settings in html2canvasproxy.php:

//Turn off errors because the script already own uses "error_get_last"
error_reporting(0);

//setup
define('JSLOG', 'console.log'); //Configure alternative function log, eg. console.log, alert, custom_function
define('PATH', '../screenshots');//relative folder where the images are saved
define('CCACHE', 60 * 5 * 1000);//Limit access-control and cache, define 0/false/null/-1 to not use "http header cache"
define('TIMEOUT', 30);//Timeout from load Socket
define('MAX_LOOP', 10);//Configure loop limit for redirect (location header)
define('CROSS_DOMAIN', 0);//Enable use of "data URI scheme"

//constants
define('EOL', chr(10));
define('WOL', chr(13));
define('GMDATECACHE', gmdate('D, d M Y H:i:s'));

score 0 · Answer 1 · answered Jan 08 '16 at 06:14

First idea I got while reading is to include some timeout - waiting a bit longer (let's say 200ms) - so that you have more probability for things to get loaded.

But after reading this on plugin site: "The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page." it could not help.

Personally I would investigate using another solution - like for example PhantomJS:

"PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG."

It's easy like this:

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

Html2canvas: facebook plugin comments

1 Answers1