Delay Function? #8

Smithee11 · 2021-01-15T09:12:34Z

Smithee11
Jan 15, 2021

Morning,

Its a really nice library - I was wondering if there there is a delay function? I have a page that takes time to load so I need to delay the screenshot?

This then leads onto any other functions, such as ticking cookies on pages etc? for example grabbing a screenshot of the news.bbc.co.uk or washingtonpost.com does not work as the sites pop up cookies etc for the first time user?

Hope its ok to ask,

Andy

vgalin · 2021-01-15T10:10:59Z

vgalin
Jan 15, 2021
Maintainer

Hi,

Don't worry, discussions are the right place to ask questions.

For adding delay, the virtual-time-budget flag should do the job, like so:

from html2image import Html2Image

hti = Html2Image(
    custom_flags=['--virtual-time-budget=10000']
)
hti.screenshot(url="http://example.com", save_as='example.png')

In this example, you allow the page to load for a maximum of 10 seconds.

The custom_flag parameter lets you specify any flags you want (it is implemented but has yet to be documented).
You can find a list of Chromium flags here.

I'll see what can be done for the cookie modals and I'll get back to you.

Edit: I don't see any easy way to get rid of modals. It is possible to get rid of them using extensions but Chrome headless cannot be launched with extensions. A workaround would be to GET the source code of the page, get rid of the code that makes the modal appear and feed the remaining code to html2image.

7 replies

TerralyticsNL Jun 15, 2021

Thanks for your reply @vgalin ! I use the flag since the map I try to create an image from is not loaded completely before it is
'printed'. See image below. As you can see not all raster-tiles are completely visible. The flag does not seem to have any effect (and it also does not wait for 10 seconds before it continues). So maybe it is something completely different

vgalin Jun 18, 2021
Maintainer

@TerralyticsNL I don't really have an idea of what could cause this, would you mind sharing the website you are screenshotting if it is a public one? (or the API if you are getting your raster tiles from one).

TerralyticsNL Jun 21, 2021

@vgalin Here's an example of the code I'm trying to create an image from:

<html>

    <head>
        <title>Leaflet VectorMap</title><br><meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
    </head>
      
    <body>
        <div id="mapid0" style="width: 1920px; height: 900px;"></div> 
<script>


	var geojsonFeature = {
	"type" : "FeatureCollection",
	"name" : "GeoJSON",
	"features" : [
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates" : [ 4.7178405098, 52.5826007379 ]
			},
			"properties" : {
				"gridid" : "109630-510765-5-0",
				"ini_kvid" : 0,
				"objecttype" : "green"
			}
		},
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates" : [ 4.7180543031, 52.5830962532 ]
			},
			"properties" : {
				"gridid" : "109645-510820-5-0",
				"ini_kvid" : 0,
				"objecttype" : "fairway"
			}
		},
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates" : [ 4.714064692, 52.5834781458 ]
			},
			"properties" : {
				"gridid" : "109375-510865-5-0",
				"ini_kvid" : 0,
				"objecttype" : "bunker"
			}
		}
	]
}
	
	var mymap = L.map('mapid0');
	
	L.tileLayer('https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/Actueel_ortho25/EPSG:3857/{z}/{x}/{y}.jpeg', {
    maxZoom: 18,
    maxNativeZoom: 19
}).addTo(mymap);

function style(feature) {
  return {
    radius: 10,
    weight: 2,
    opacity: 0.9,
    color: "#F26717",
    fillOpacity: 0.3,
    fillColor: "#F26717"
  };
}

function onEachFeature(feature, layer) {
   var layerType = layer.feature.geometry.type;
    if (layerType == 'Point'){
		//Perform extra actions
	}
	if (layerType == 'Polygon'){
		//Perform extra actions
	}
	if (layerType == 'LineString'){
		//Perform extra actions
	}
     if (feature.properties && feature.properties._anyotherrandomvalue) {
            layer.bindPopup(feature.properties._anyotherrandomvalue.toString());
     }
     if (feature.properties && feature.properties.objecttype) {
            layer.bindTooltip(feature.properties.objecttype.toString(), {permanent: true,  opacity: 0.9});
      }
}

var geojsonLayer = L.geoJSON(geojsonFeature, {
	pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng);
	},
	style: style,
	onEachFeature: onEachFeature
}).addTo(mymap);
	mymap.fitBounds(geojsonLayer.getBounds());
    mymap.removeControl(mymap.zoomControl);
</script>
    </body>
 
</html>

vgalin Jun 21, 2021
Maintainer

@TerralyticsNL I managed to get around the issue by disabling the fadeAnimation option at the instantiation (not sure if that's the term in JS) of the map object :

var mymap = L.map('mapid0', {'fadeAnimation': false});

By disabling this animation the tiles appear instantly when the client receive them.

TerralyticsNL Jun 21, 2021

Perfect! I'd never have thought about that. Thanks for your great help! And thanks for the html2image package of course!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Delay Function? #8

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Delay Function? #8

Smithee11 Jan 15, 2021

Replies: 1 comment · 7 replies

vgalin Jan 15, 2021 Maintainer

TerralyticsNL Jun 15, 2021

vgalin Jun 18, 2021 Maintainer

TerralyticsNL Jun 21, 2021

vgalin Jun 21, 2021 Maintainer

TerralyticsNL Jun 21, 2021

Smithee11
Jan 15, 2021

Replies: 1 comment 7 replies

vgalin
Jan 15, 2021
Maintainer

vgalin Jun 18, 2021
Maintainer

vgalin Jun 21, 2021
Maintainer