Html2canvas：facebook plugin comments

Question

私はウェブサイトの魔女がfacebookのプラグインのコメントを使用しています。私はスクリーンショットの中にこれらのコメントを入れる方法を探しています。私が単純なhtml2キャンバスを使用する場合、私はそれらの代わりに空白のボックスを取得します。だから私はhtml2canvasproxyを使用しようとしましたが、現在はFacebookのコメントの代わりにいくつかのjavascriptのコンソールログを出力します。

のように表示されますが、私はとなります。私は、html2canvasproxy.phpがfacebook plugin 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

最初のアイデアはいくつかを含めることですtimeout - もう少し長く待つ（200msと言う） - 物事が読み込まれる確率が高くなるようにします。

プラグインサイトでこれを読んだ後、「このスクリプトでは、ウェブページやその一部の「スクリーンショット」をユーザーのブラウザに直接表示することができます。スクリーンショットは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(); 
});