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

Question

我已经尝试了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);
            }
        });
    });
});

Answer 1

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

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

http://phantomjs.org