java - Saving a web page as image - Stack Overflow

admin管理员组

文章数量:1384326

As a hobby project I am exploring the ways to save a web page (HTML) as image, mostly programatically using c/c++/javascript/java. Till now I have e across the following ways:

1. Get the IHTMLElement of page body and use it to query for IHTMLElementRender and then use its DrawToDC method (Ref: .aspx ). But the problem is that it did not work for all the pages (mostly pages having embedded iframes).

2. Another way which i can think of is to use some web browser ponent and when the pages is fully loaded then capture it using BitBlt (Ref: .85%29.aspx ). But the problem is that the page I have requested may be longer than my screen size and it will not fit into the web browser ponent.

Any direction/suggestion to resolve above issues or an alternative approach is greatly appreciated.

As a hobby project I am exploring the ways to save a web page (HTML) as image, mostly programatically using c/c++/javascript/java. Till now I have e across the following ways:

1. Get the IHTMLElement of page body and use it to query for IHTMLElementRender and then use its DrawToDC method (Ref: http://www.codeproject./KB/IP/htmlimagecapture.aspx ). But the problem is that it did not work for all the pages (mostly pages having embedded iframes).

2. Another way which i can think of is to use some web browser ponent and when the pages is fully loaded then capture it using BitBlt (Ref: http://msdn.microsoft./en-us/library/dd183370%28VS.85%29.aspx ). But the problem is that the page I have requested may be longer than my screen size and it will not fit into the web browser ponent.

Any direction/suggestion to resolve above issues or an alternative approach is greatly appreciated.

• java
• javascript
• c++
• html
• image

Share Improve this question Follow edited Feb 2, 2013 at 21:51 MrSmith42 10.2k66 gold badges4141 silver badges5151 bronze badges asked Nov 9, 2010 at 4:55 FavoniusFavonius 14k33 gold badges5757 silver badges9595 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

If you use Python, there's pywebshot and webkit2png. Both of them have some dependencies, though.

Edit: Oops, Python is not in your list of preferred languages. I'll leave this answer here anyway, because you said "mostly" and not "exclusively".

Another (somewhat roundabout) option would be to run a server like Tomcat and use Java to call a mand-line tool to take a screenshot. Googling for "mand line screenshot windows" es up with some reasonable-looking possibilities. Besides running a server, though, I don't know a good way to run local executables from javascript. This method would make it cross-browser, though, which is a plus (just make an ajax call to the script when you want a screenshot).

Unfortunately I don't actually know how to deploy war files. It might be more trouble to use Tomcat; I mentioned it because Java was a preferred language. It would be fairly simple to run XAMPP and use this PHP snippet, and you wouldn't really have to learn php:

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

EDIT

You know, I'm not sure that really answers your question. It's one way, but it's ing at it from the JavaScript end rather than the scripting end. If you want to do it via scripting, you could always use Selenium. It supports capturing screenshots of an entire page, and can be controlled via Java.

Well finally able to crack it by going through these two articles:

1. http://www.codeproject./KB/GDI-plus/WebPageSnapshot.aspx [c# code - IE]
2. http://www.codeproject./KB/graphics/IECapture.aspx [c++ & GDI - IE]

Can't share the code, but the above two articles will give you the best possible solution.

Also have a look at:

https://addons.mozilla/en-US/firefox/addon/3408/ [firefox + javascript]

Above things are still ok. BUT not guaranteed to work always. Check the below link: How do I render the scrollable regions of a canvas with IViewObject::Draw?

If you are OK using javascript for it, I suggest going with phantomjs

Example from http://fcargoet.evolix/

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

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

// define the ponents we want to capture
var ponents = [{
    output : 'feed-viewer-left.png',
    //ExtJS has a nice ponent 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 () {
            ponents.forEach(function(ponent){
                //execute the before function
                ponent.before && page.evaluate(ponent.before);
                // get the rectangular area to capture
                /*
                 * page.evaluate() is sandboxed
                 * so that 'ponent' is not defined.
                 *
                 * It should be possible to pass variables in phantomjs 1.5
                 * but for now, workaround!
                 */
                eval('function workaround(){ window.ponentSelector = "' + ponent.selector + '";}')
                page.evaluate(workaround);

                var rect = page.evaluate(function(){
                    // find the ponent
                    var p = Ext.ComponentQuery.query(window.ponentSelector)[0];
                    // get its bounding box
                    var box = p.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(ponent.output);
            });
            // job done, exit
            phantom.exit();
        }, 2000);
    }
});

本文标签： javaSaving a web page as imageStack Overflow