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将是一个不错的选择，因为它具有屏幕捕获功能。

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

Answer 2

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

Answer 3

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

• html2canvas - 由 Stack Overflow 用户 @niklas 创建，有关更多信息，请参阅他的答案。
• js反馈

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

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

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

Answer 4

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