如何使用 PhantomJs 从网页截取 googlemap 的屏幕截图？

Question

我的要求是截取网页谷歌地图的屏幕截图。我在谷歌地图上动态绘制标记和折线。我正在使用 PhantomJS 进行截图。但屏幕截图没有捕获正在显示的完整谷歌地图在网页上。

Html and javascript for loading and display google map
----------
     <script>
            function initMap() {
                    var mapOptions = {
                        zoom: 15,
                        center: new google.maps.LatLng(28.5354383, 77.26393259999998)
                    };
                    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var project_id = $('#project').data('url')
                    var latt = substation[0]
                    var lngg = substation[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(latt, lngg),
                        title: new google.maps.LatLng(latt, lngg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Sub-Station",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/sub_station.png',
                        }
                    });
                    google.maps.event.addListener(marker, "dragend", function(event) {
                        $.getScript("/update_pole.js?project_id=" + project_id + "&Type=SS" + "&new_cordinated=" + event.latLng.toString().slice(1, -1), function(data) {});
                    });
                    var lattt = feeder[0]
                    var lnggg = feeder[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lattt, lnggg),
                        title: new google.maps.LatLng(lattt, lnggg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Feeder",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/ptw.png',
                        }
                    });

用于截屏的 PhantomJs

var page = require('webpage').create();
  page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() {
  page.viewportSize = { width: 1440, height: 900 };
  var clipRect = page.evaluate(function(){
    return document.querySelector("div#map").getBoundingClientRect();
  });
  page.render('github.png');
  phantom.exit();
});

预期的屏幕截图

当前即将截屏

Answer 1

注意屏幕截图的尺寸，400x300。这是默认的 PhantomJS 视口大小。您必须在打开页面之前设置所需的视口大小。

var page = require('webpage').create();

// Got to set this before opening a page
page.viewportSize = { width: 1440, height: 900 };

page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() {
    var clipRect = page.evaluate(function(){
        return document.querySelector("div#map").getBoundingClientRect();
    });
    page.render('github.png');
    phantom.exit();
});