javascript – Html2canvas：facebook插件评论

我有一个使用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'));

解决方法

我在阅读时得到的第一个想法是包括一些超时 – 等待一段时间(让我们说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();
});