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

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);
    }
});

结果：output.png

Answer 2

不确定这是如何发挥作用的，但您可以利用<canvas>元素和draw the <div> there。然后canvas具有导出选项以转换为jpg，png等。

Answer 3

这不容易做到，但有一些项目可以帮助你。 看看：

• html2canvas - 由Stack Overflow用户@niklas创建，有关详细信息，请参阅his answer。
• jsFeedback

基本上，他们使用<canvas>在其上绘制每个DOM元素，然后将其保存为位图。由于这种机制，输出图像可能不是100％准确。

如果您选择使用html2canvas，它会接受要呈现的DOM元素列表。请查看this example的使用情况。

其他方法是创建Chrome扩展程序 - 这很容易 - 如果在您的用例中可行的话。如果是这样，请查看chrome.tabs.captureVisibleTab()。

Answer 4

我使用phantomjs和screen capture来拍摄网站的图片。 在Web服务器上保存图像后，您可以剪切图像文件以获取页面的特定区域。