Html2canvas:facebook插件评论

Question

我有一个使用facebook插件评论的网站.我正在寻找一种方法在屏幕截图中包含这些评论.如果我使用简单的html2canvas,我会得到一个空白框而不是它们.所以我尝试使用html2canvasproxy但现在它打印一些javascript控制台日志而不是facebook评论.

它应该像 但我明白了 .我注意到html2canvasproxy.php正确保存了facebook插件html.

我在控制台日志中找不到任何javascript错误.

我使用以下代码截取屏幕截图:

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

我在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'));

Answer 1

我在阅读时得到的第一个想法是包括一些超时 - 等待更长的时间（假设 200 毫秒） - 这样你就有更大的可能性加载东西。

但在插件网站上阅读此内容后：“该脚本允许您直接在用户浏览器上截取网页或其部分内容的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确于真实情况表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。” 这无济于事。

就我个人而言，我会使用另一种解决方案进行调查 - 例如PhantomJS：

“PhantomJS 是一个可使用 JavaScript API 编写脚本的无头 WebKit。它对各种 Web 标准提供快速的本地支持：DOM 处理、CSS 选择器、JSON、Canvas 和 SVG。”

很简单，如下所示：

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