Is it possible to make a picture of a specific part of your website?

Question

My apologies if this is a stupid question, but is there a way to 'take a picture' from a certain part of the website and save it on the computer?

HTML

<div id="red" color="red" width="100px" height="100px"></div>
<div id="green" color="green" width="100px" height="100px"></div>
<div id="blue" color="blue" width="100px" height="100px"></div>

For example I have a webpage with 3 divs next to each other and I want to take a picture of only the green div, and save it as a jpeg or something.

Is this at all possible with JQuery/Javascript for example?

Answer 1

As grigno said, Phantom.js would be a good choice since it has screen capture capabilities.

Here's an example of how you can take pictures of a specific element using getBoundingClientRect.

JavaScript

var page = require('webpage').create();

address = 'https://stackoverflow.com/q/18466303/2129835';
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            page.clipRect = page.evaluate(function() {
                return document.querySelector('.question .post-text').getBoundingClientRect(); 
            });
            page.render('output.png');
            phantom.exit();
        }, 200);
    }
});

Result: output.png

Answer 2

Not sure how this plays out, but you may be able to take advantage of the <canvas> element and draw the <div> there. Then canvas has export options to convert to jpg, png, etc.