CODEWITHSUNDEEP
javascriptjqueryhtmlcss
IDJosh
IDJosh

Reputation: 109

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

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?

Upvotes: 4

Views: 1255

Answers (4)

thgaskell
thgaskell

Reputation: 13256

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

enter image description here

Upvotes: 2

grigno
grigno

Reputation: 3198

I used phantomjs with screen capture to take a picture of a site. After saving the image on the web server you can cut the image file to get a specific area of your page.

Upvotes: 1

kamituel
kamituel

Reputation: 35970

It is not easily done, but there are some projects which can help you out. Have a look at:

Basically, they use <canvas> to draw each DOM element on it, and then save it as bitmap. Due to this mechanics, the output image may not be 100% accurate though.

If you opt to use html2canvas, it accepts a list of DOM elements to render. Have a look at this example for usage.

Other approach would be to create Chrome extension - it's easy then - if that's feasible in your use case. If so, have a look at chrome.tabs.captureVisibleTab().

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101614

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.

Upvotes: 1

Related Questions