2

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

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 吗？

4

4 回答 4

2

正如grigno所说，Phantom.js将是一个不错的选择，因为它具有屏幕捕获功能。

下面是一个示例，说明如何使用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

在此处输入图像描述

于 2013-08-27T14:34:39.440 回答
1

不确定这是如何发挥作用的，但您可以利用该<canvas>元素并在那里绘制<div>。然后画布有导出选项可以转换为 jpg、png 等。

于 2013-08-27T13:08:44.063 回答
1

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

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

如果您选择使用 html2canvas，它会接受要呈现的 DOM 元素列表。看看这个例子的用法。

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

于 2013-08-27T13:08:48.523 回答
1

我使用带有屏幕截图的phantomjs来拍摄网站的照片。在网络服务器上保存图像后，您可以剪切图像文件以获取页面的特定区域。

于 2013-08-27T13:25:50.783 回答