如何将 html 地图转换为图像(png 或 jpg ) [英] 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

在上面添加一些标记

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)

将地图保存为 html 文件.工作正常.

Save the map as html file. Works fine.

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

当我尝试从 html 获取图像或 pdf 时出现问题.

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)

pdf文件是空白的

The pdf file is blank

而且 macBook 无法打开 jpeg 和 png 文件.

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)

效果很好.但是，一旦我将out.pdf 更改为out.png，我将无法打开获取的文件.
有没有人有想法，我该如何解决这个问题?
我正在尝试获得巨大的图像.但它也不适用于 300 像素 X 300 像素的图像.
欢迎提供任何提示.

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.

推荐答案

一个选项(诚然有点粗糙)是使用 selenium 库自动打开 HTML，然后从那里截取屏幕截图，然后将其保存为图片.代码看起来像(我已经根据 MS Edge 给出了代码，但其他浏览器的代码应该类似):

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.

这篇关于如何将 html 地图转换为图像(png 或 jpg )的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！