javascript - 是否可以为您网站的特定部分制作图片？

Question

如果这是一个愚蠢的问题，我深表歉意，但是有没有办法从网站的某个部分“拍照”并将其保存在计算机上？

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>

例如，我有一个网页，其中有 3 个相邻的 div，我想只拍一张绿色 div 的照片，并将其保存为 jpeg 或其他格式。

例如，对于 JQuery/Javascript，这完全可能吗？

Answer 1

作为grigno说，Phantom.js将是一个不错的选择，因为它有 screen capture能力。

这是一个示例，说明如何使用 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);
    }
});

结果:输出.png