एचटीएमएल 2 कैनवास: फेसबुक प्लगइन टिप्पणियां

Question

मेरे पास एक वेबसाइट चुड़ैल फेसबुक प्लगइन टिप्पणियों का उपयोग करता है। मैं स्क्रीनशॉट के अंदर उन टिप्पणियों को रखने का एक तरीका ढूंढ रहा हूं। अगर मैं सरल html2canvas का उपयोग करता हूं तो मुझे उनके बजाय एक खाली बॉक्स मिलता है। तो मैं html2canvasproxy का उपयोग करने की कोशिश करता हूं लेकिन अब यह फेसबुक टिप्पणियों के बजाय कुछ जावास्क्रिप्ट कंसोल लॉग प्रिंट करता है।

यह जैसा लगता है लेकिन मुझे मिलता है। मैंने देखा कि html2canvasproxy.php फेसबुक प्लगइन एचटीएमएल सही ढंग से बचाता है।

मुझे कंसोल लॉग में कोई जावास्क्रिप्ट त्रुटि नहीं मिल रही है।

मैं निम्नलिखित कोड का उपयोग कर रहा स्क्रीनशॉट लेने के लिए:

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

पहले विचार मैं जबकि पढ़ने मिला कुछ शामिल करने के लिए है टाइमआउट - थोड़ी देर इंतजार कर रहा है (मान लें 200ms) - ताकि चीजों को लोड करने के लिए आपके पास अधिक संभावना हो।

लेकिन प्लगइन साइट पर इसे पढ़ने के बाद: "स्क्रिप्ट आपको वेबपृष्ठों या इसके कुछ हिस्सों के सीधे" स्क्रीनशॉट "लेने की अनुमति देती है, सीधे उपयोगकर्ता ब्राउज़र पर। स्क्रीनशॉट डीओएम पर आधारित है और ऐसा 100% वास्तविक प्रतिनिधित्व के लिए सटीक है क्योंकि यह वास्तविक स्क्रीनशॉट नहीं बनाता है, लेकिन पृष्ठ पर उपलब्ध जानकारी के आधार पर स्क्रीनशॉट बनाता है। " यह मदद नहीं कर सका।

व्यक्तिगत तौर पर मैं एक और समाधान का उपयोग कर जांच करेगा - उदाहरण के PhantomJS के लिए की तरह:

"PhantomJS एक बिना सिर वेबकिट एक JavaScript API के साथ स्क्रिप्ट है यह विभिन्न वेब मानकों के लिए तेजी से और देशी समर्थन है: डोम हैंडलिंग, CSS चयनकर्ता,। जेएसओएन, कैनवास, और एसवीजी। "

यह इस तरह आसान है:

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