是否可以对网站的特定部分进行图片制作？

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.

Answer 3

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

• html2canvas - created by Stack Overflow user @niklas, see his answer for more info.
• jsFeedback

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

Answer 4

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.