Html2canvas: facebook 插件评论答案

【问题标题】：Html2canvas: facebook plugin commentsHtml2canvas: facebook 插件评论
【发布时间】：2016-04-07 09:23:36
【问题描述】：

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

它应该像但我得到。我注意到 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'));

【问题讨论】：

标签： javascript php facebook html2canvas

【解决方案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();
});

【讨论】：