javascript - 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 是一个 headless WebKit，可使用 JavaScript API 编写脚本。它对各种 Web 标准具有快速和原生的支持:DOM 处理、CSS 选择器、JSON、Canvas 和 SVG。”

这很简单:

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