How to convert html map into image (png or jpg )

问题

I am trying to save a map containing markers and also heatmap into an image. Here is the code to display the map.

from ipywidgets import Layout
import geopandas

defaultLayout=Layout(width='3000px', height='3000px') # A very large image.

lat_lgn = [39.74248, 254.993622]

m_f = Map(center=lat_lgn, zoom=12, layout=defaultLayout)

marker_m = Marker(location=lat_lgn, draggable=False)
m_f.add_layer(marker_m)

m_f

Add some markers on it

arr_test1 = [39.74258, 254.993682]
arr_test2 = [39.76288, 254.988932]
arr_test3 = [39.79998, 254.991982]

all_loc = [arr_test1, arr_test2, arr_test3]

for cur_loc in all_loc:
    point = CircleMarker(
        radius=10,
        location=cur_loc,
        color='red',
        fill_color="black",
    )
    m_f.add_layer(point)
    
    time.sleep(0.001)

Save the map as html file. Works fine.

m_f.save('f_map.html', title='My Map')

The problem occurs, when I try to get an image, or pdf from the html.

import imgkit
import pdfkit

config = pdfkit.configuration(wkhtmltopdf='/usr/local/bin/wkhtmltopdf')
pdfkit.from_file('f_map.html', 'outpdf.pdf', configuration=config)
pdfkit.from_file('f_map.html', 'outjpg.jpg', configuration=config)
pdfkit.from_file('f_map.html', 'outpng.png', configuration=config)

The pdf file is blank

And macBook is not able the open neither the jpeg nor the png file.

To ckeck my dependencies, I have tried this:

import pdfkit
pdfkit.from_url('http://stackoverflow.com', 'out.pdf', configuration=config)

which works fine. However, once I change out.pdf to out.png, I cannot open the obtained file.
Does anyone has an idea, how I can solve the issue ?
I am trying to get hurge image. But it also did not work with a 300px X 300px image.
Any hints will be welcome.

回答1:

One option (which admittedly is a little crude) is to use the selenium library to automatically open the HTML and from there take a screenshot which then is saved as an image. The code will look like (I have given the code here according to MS Edge, but the code should be similar for other browsers):

from selenium import webdriver
from time import sleep
filename = '<Name (without path) of your HTML file here>'
MyBrowser = webdriver.Edge(r"<path to webdriver here>\\msedge.exe")
murl = r'file:\\{path}\{mapfile}'.format(path='<path to HTML here>',mapfile=mfilename)
MyBrowser.get(murl)
sleep(10) #this is not strictly necessary but is here in case you need time for map tiles to load
MyBrowser.save_screenshot('<Image_file_name>')
MyBrowser.quit()

Note that this will require you to install a webdriver for your browser in advance.

来源：https://stackoverflow.com/questions/65166811/how-to-convert-html-map-into-image-png-or-jpg

标签

python

html

wkhtmltopdf

pdfkit

imgkit