2

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?

IDJosh
  • 89
  • 9
  • which picture you want ? Back ground image of div or if the div has a `` ? Assuming that you always need `div id =green` image. – kbvishnu Aug 27 '13 at 13:09
  • 1
    See this question http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with-javascript – Madurai Aug 27 '13 at 13:09
  • Depending your needs you could simply try a webcrawler to get the piece of code from a website. Here is a nice tutorial http://www.makeuseof.com/tag/build-basic-web-crawler-pull-information-website/ – VladH Aug 27 '13 at 13:12

4 Answers4

2

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

Community
  • 1
  • 1
thgaskell
  • 12,772
  • 5
  • 32
  • 38
1

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.

Brad Christie
  • 100,477
  • 16
  • 156
  • 200
1

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().

Community
  • 1
  • 1
kamituel
  • 34,606
  • 6
  • 81
  • 98
1

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.

grigno
  • 3,128
  • 4
  • 35
  • 47