使用 HTML 或 JavaScript 制作当前网站的“截图”？答案

【问题标题】：Making a "screenshot" of the current website using HTML or JavaScript?使用 HTML 或 JavaScript 制作当前网站的“截图”？
【发布时间】：2016-04-09 10:17:42
【问题描述】：

我尝试了 html2canvas，但没有按预期工作，因为我正在使用带有自定义标记的 Google 地图，并且它只会在没有这些标记的情况下制作地图的屏幕截图。

我想制作一个屏幕截图，使其看起来像：

但结果是：

图表看起来也不是很好。我可以使用任何替代方案吗？

这是我使用 html2canvas 创建图像的代码（其中#downloadPDF 是一个按钮）：

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $('#downloadPDF').click(function () {
        html2canvas($(".map"), {
            logging: true,
            useCORS: true,
            onrendered: function (canvas) {
                var imgData = canvas.toDataURL('image/png');
                window.open(imgData);
            }
        });
    });
});

【问题讨论】：

希望 CSS 能做到这一点。是否使用了任何媒体查询？检查它们。
由于 html2canvas 使用 dom ，如果还有其他一些东西，比如另一个画布，我认为它可能不起作用。我不知道你是否可以专门在客户端做，也许你必须使用类似的东西phantomJS phantomjs.org/screen-capture.html
@AfzaalAhmadZeeshan，我也在使用 Bootstrap，我看到一些媒体查询，但我不确定这些媒体查询如何影响 html2canvas 库。
@FabioCosta，只是客户端。你知道其他选择吗？
@kevinS 只有 JS 我不确定。我会查明什么不起作用。如果它是画布，您可以尝试将画布转换为图像，看看这是否给出了您想要的确切输出。如果它给你，你可以用生成的图像临时替换画布并使用 html2canvas

标签： javascript html google-maps html2canvas

【解决方案1】：

不确定您的托管设置，但我使用 PhantomJS 创建网页的屏幕截图，并将它们保存为图像或 PDF。

下载库时，示例目录中有一个 rasterize.js，它允许您传入参数以保存 URL。您可以修改它，让它暂停几秒钟，然后保存页面 - 给地图足够的时间来正确加载。

http://phantomjs.org

【讨论】：