如何使用PhantomJs從網頁獲取googlemap的屏幕截圖？

Question

我的要求是拍攝網頁Google Map的屏幕快照。我正在Google Map上動態繪制Markers和Polyline。我使用PhantomJS進行屏幕截圖。但是屏幕快照不是捕獲顯示在網頁上的完整Google Map 。

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();
});