छवि के रूप में एक वेब पेज सहेजना

Question

एक शौक परियोजना के रूप में मैं छवि के रूप में एक वेब पेज (एचटीएमएल) को सहेजने के तरीकों की खोज कर रहा हूं, अधिकतर प्रोग्रामेटिक रूप से सी/सी ++/जावास्क्रिप्ट/जावा का उपयोग कर। अब तक मैं निम्नलिखित तरीके सामने आने वाले:

1. पेज शरीर के IHTMLElement जाओ और IHTMLElementRender के लिए क्वेरी करने के लिए इसका इस्तेमाल करते हैं और उसके बाद अपनी DrawToDC विधि (रेफरी:http://www.codeproject.com/KB/IP/htmlimagecapture.aspx) का उपयोग करें। लेकिन समस्या यह है कि यह सभी पृष्ठों के लिए काम नहीं करता है (ज्यादातर पेज एम्बेडेड iframes)।

2. एक और तरीका है जो मैं के बारे में सोच सकते हैं कुछ वेब ब्राउज़र घटक का उपयोग करने के लिए है और पृष्ठों की पूरी तरह से भरी हुई है तो BitBlt का उपयोग कर इसे कब्जा (रेफरी:http://msdn.microsoft.com/en-us/library/dd183370%28VS.85%29.aspx)। लेकिन समस्या यह है कि मैंने जिस पृष्ठ का अनुरोध किया है वह मेरे स्क्रीन आकार से अधिक लंबा हो सकता है और यह वेब ब्राउज़र घटक में फिट नहीं होगा।

उपरोक्त मुद्दों या वैकल्पिक दृष्टिकोण को हल करने के लिए कोई भी दिशा/सुझाव की सराहना की जाती है।

Answer 1

खैर अंत में इन दो लेखों से गुज़रते हुए यह दरार करने में सक्षम कोड साझा नहीं करते हैं, लेकिन उपरोक्त दो लेख आपको सबसे अच्छा संभव समाधान देंगे।

https://addons.mozilla.org/en-US/firefox/addon/3408/ [फ़ायरफ़ॉक्स + जावास्क्रिप्ट]

चीजों से ऊपर अभी भी ठीक कर रहे हैं:

इसके अलावा पर एक नजर है। लेकिन हमेशा काम करने की गारंटी नहीं है। नीचे दिए गए लिंक की जाँच करें: How do I render the scrollable regions of a canvas with IViewObject::Draw?

Answer 2

यदि आप पायथन का उपयोग करते हैं, तो pywebshot और webkit2png है। हालांकि, उनमें से दोनों की कुछ निर्भरताएं हैं।

संपादित करें: ओह, पायथन आपकी पसंदीदा भाषाओं की सूची में नहीं है। मैं इस जवाब को वैसे भी छोड़ दूंगा, क्योंकि आपने "ज्यादातर" और "विशेष रूप से" नहीं कहा था।

Answer 3

एक और (कुछ हद तक चौराहे) विकल्प टॉमकैट जैसे सर्वर को चलाने और स्क्रीनशॉट लेने के लिए कमांड लाइन टूल को कॉल करने के लिए जावा का उपयोग करना होगा। "कमांड लाइन स्क्रीनशॉट विंडोज़" के लिए गुगलिंग कुछ उचित दिखने वाली संभावनाओं के साथ आता है। सर्वर चलाने के अलावा, मुझे जावास्क्रिप्ट से स्थानीय निष्पादन योग्य चलाने के लिए एक अच्छा तरीका नहीं पता है। यह विधि इसे क्रॉस-ब्राउजर बनाती है, हालांकि, जो एक प्लस है (जब आप स्क्रीनशॉट चाहते हैं तो स्क्रिप्ट को केवल अजाक्स कॉल करें)।

दुर्भाग्यवश मुझे वास्तव में नहीं पता कि युद्ध फ़ाइलों को कैसे तैनात किया जाए। टोमकैट का उपयोग करने में और अधिक परेशानी हो सकती है; मैंने इसका उल्लेख किया क्योंकि जावा एक पसंदीदा भाषा थी। यह काफी XAMPP चलाने के लिए और इस पीएचपी टुकड़ा का उपयोग करना आसान होगा, और तुम सच में php सीखने की आवश्यकता नहीं होगी:

<?php 
exec("/path/to/exec args"); 
?> 

संपादित

तुम्हें पता है, मुझे लगता है कि वास्तव में जवाब यकीन नहीं है आपका प्रश्न। यह एक तरीका है, लेकिन यह स्क्रिप्टिंग अंत के बजाय जावास्क्रिप्ट अंत से आ रहा है। यदि आप इसे स्क्रिप्टिंग के माध्यम से करना चाहते हैं, तो आप हमेशा सेलेनियम का उपयोग कर सकते हैं। यह पूरे पृष्ठ के स्क्रीनशॉट को कैप्चर करने का समर्थन करता है, और जावा के माध्यम से नियंत्रित किया जा सकता है। -

http://www.codeproject.com/KB/graphics/IECapture.aspx [C++ & GDI - आईई]

कर सकते हैं '

1. http://www.codeproject.com/KB/GDI-plus/WebPageSnapshot.aspx [आईई सी # कोड]:

Answer 4

आप इसके लिए जावास्क्रिप्ट का उपयोग कर ठीक कर रहे हैं, मैं से http://fcargoet.evolix.net/

var page = new WebPage(), 
    address = 'http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/feed-viewer/feed-viewer.html'; 

page.viewportSize = { 
    width : 800, 
    height : 600 
}; 

// define the components we want to capture 
var components = [{ 
    output : 'feed-viewer-left.png', 
    //ExtJS has a nice component query engine 
    selector : 'feedpanel' 
},{ 
    output : 'feed-viewer-preview-btn.png', 
    selector : 'feeddetail > feedgrid > toolbar > cycle' 
},{ 
    output : 'feed-viewer-collapsed.png', 
    //executed before the rendering 
    before : function(){ 
     var panel = Ext.ComponentQuery.query('feedpanel')[0]; 
     panel.animCollapse = false; // cancel animation, no need to wait before capture 
     panel.collapse(); 
    }, 
    selector : 'viewport' 
}]; 

page.open(address, function (status) { 
    if (status !== 'success') { 
     console.log('Unable to load the address!'); 
    } else { 
     /* 
     * give some time to ExtJS to 
     * - render the application 
     * - load asynchronous data 
     */ 
     window.setTimeout(function() { 
      components.forEach(function(component){ 
       //execute the before function 
       component.before && page.evaluate(component.before); 
       // get the rectangular area to capture 
       /* 
       * page.evaluate() is sandboxed 
       * so that 'component' is not defined. 
       * 
       * It should be possible to pass variables in phantomjs 1.5 
       * but for now, workaround! 
       */ 
       eval('function workaround(){ window.componentSelector = "' + component.selector + '";}') 
       page.evaluate(workaround); 

       var rect = page.evaluate(function(){ 
        // find the component 
        var comp = Ext.ComponentQuery.query(window.componentSelector)[0]; 
        // get its bounding box 
        var box = comp.el.getBox(); 
        // box is {x, y, width, height} 
        // we want {top, left, width, height} 
        box.top = box.y; 
        box.left = box.x; 
        return box; 
       }); 
       page.clipRect = rect; 
       page.render(component.output); 
      }); 
      // job done, exit 
      phantom.exit(); 
     }, 2000); 
    } 
});