Web 从交互式 Web 地图中抓取屏幕图像答案

【问题标题】：Web Scraping the screen image from an interactive web mapWeb 从交互式 Web 地图中抓取屏幕图像
【发布时间】：2018-12-21 03:46:36
【问题描述】：

我需要从以下位置将地图组件提取为静态图像： http://www.bom.gov.au/water/landscape/#/sm/Relative/day/-35.30/145.17/5/Point////2018/12/16/

此页面包含基于 Leaflet 的交互式网络地图，其中图层数据每天通过网络地图服务更新。提取的图像应包含地图上加载的任何图层。

这也需要自动化，因此没有人会打开网络浏览器并转到 URL。提取的图像将转到 Word 文档。

我是一名 Python 和 nodejs 程序员，但我无法通过 BeautifulSoup for Python 或 Cheerio for nodejs for web scraping 来实现它，因为地图不是 img 元素，而是一些动态 DIV。如何将地图组件作为图像？

【问题讨论】：

我还是没能很好地理解你的问题，如果可能的话，你能用简单的方式解释一下吗？
你在哪里卡住了？
好的。说一个简单的方法。我需要一个 nodejs 或 Python 脚本，它将获取 URL 上的地图组件并将其保存到图像中。
与其抓取这个，不如使用页面上提供的实际netCDF数据源，并使用光栅地图渲染器，这样你就可以拥有你想要的任何颜色、分辨率等. unidata.ucar.edu/software/netcdf/utilities.html
我认为可以在无头 Firefox 实例上使用 selenium webdriver 截屏，您可能想尝试一下。

标签： python node.js web-scraping beautifulsoup cheerio

【解决方案1】：

你可以使用：

from PIL import Image
from selenium import webdriver

driver = webdriver.Firefox()
driver.maximize_window() # maximize window
driver.get("http://www.bom.gov.au/water/landscape/#/sm/Relative/day/-35.30/145.17/5/Point////2018/12/16/")
element = driver.find_element_by_xpath("//*[@id=\"mapid\"]"); # this is the map xpath
location = element.location;
size = element.size;
driver.save_screenshot("canvas.png");
x = location['x'];
y = location['y'];
width = location['x']+size['width'];
height = location['y']+size['height'];
im = Image.open('canvas.png')
im = im.crop((int(x), int(y), int(width), int(height)))
im.save('canvas_el.png') # your file

如果需要循环遍历每一层，请使用以下代码：

from time import sleep
driver.find_elements_by_class_name("leaflet-control-layers-toggle")[0].click(); # make layer selector visible
layers = driver.find_elements_by_class_name("leaflet-control-layers-selector"); # select each layer and wait 5seconds
for layer in layers:
    layer.click()
    sleep(5)
    # you can also capture screenshots here

【讨论】：