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

Question

我尝试了html2canvas，但效果不如预期，因为我正在使用带有自定义标记的Google Maps，而它只会截取没有这些标记的地图截图。我想要制作一个屏幕截图，使其看起来像：

但结果是：

图表看起来也不是很好，有没有其他的替代方案可以使用？

这是我用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);
            }
        });
    });
});

- Kevin S

---

希望CSS可以做到这一点。有使用任何媒体查询吗？请检查它们。 - Afzaal Ahmad Zeeshan

由于html2canvas使用dom，如果有其他类似另一个画布的东西，我认为它可能无法正常工作。我不知道您是否可以仅在客户端执行此操作，也许您必须使用类似phantomJS的东西http://phantomjs.org/screen-capture.html - FabioCosta

@AfzaalAhmadZeeshan，我也在使用Bootstrap，我看到了一些媒体查询，但我不确定这些媒体查询会如何影响html2canvas库。 - Kevin S

@FabioCosta，只是客户端的。你知道其他的替代方案吗？ - Kevin S

@kevinS，仅使用JS我不确定。我会找出哪里出了问题。如果它是一个画布，你可以尝试将画布转换为图像，并查看是否给出了你想要的精确输出。如果它能够给出你想要的结果，你可以暂时用生成的图像替换画布并使用html2canvas。 - FabioCosta

Answer 1

我不确定你的主机设置，但我曾使用PhantomJS创建网页截图，并将它们保存为图像或PDF。

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

http://phantomjs.org

- Luke P