龙空技术网

用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

AI算法交流圈 556

前言:

当前兄弟们对“python页面截图”大体比较关心,朋友们都需要剖析一些“python页面截图”的相关知识。那么小编也在网摘上汇集了一些有关“python页面截图””的相关资讯,希望我们能喜欢,朋友们快快来了解一下吧!

对WebElement截图

WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素。若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了。

WebDriver.PhantomJS自带的方法支持对整个网页截屏。

下面提供几种思路。

方式一

针对WebDriver.Chrome

通过WebDriver的js脚本注入功能,曲线救国。 1. 注入第三方html转canvas的js库(见下方推荐)

2. 获取元素html源码

3. 将html转换为canvas

4. 下载canvas

优点: 截取长图容易实现 缺点: 加载第三方库耗费时间

方式二

针对WebDriver.Chrome

截取全图,自行裁剪、拼接 1. 获取元素位置、大小

2. 获取窗口大小

3. 截取包含元素的窗口

4. 进行相应的裁剪和拼接。

优点: 不需太多js工作,python+少量js代码即可完成 缺点: 拼接等工作会被WebDriver的实现差异、图片加载速度等因素影响,需多加注意。 在保证截图质量的情况下,速度较慢

方式三

针对WebDriver.PhantomJS 由于接口实现的差异,PhantomJS相比于Chrome,可以截取到整个网页。所以获取指定元素的截图也就简单很多

截取网页全图裁剪指定元素

driver = webdriver.Chrome() driver.get('') driver.save_screenshot('screenshot.png')left = element.location['x'] top = element.location['y'] right = element.location['x'] + element.size['width'] bottom = element.location['y'] + element.size['height']im = Image.open('screenshot.png') im = im.crop((left, top, right, bottom)) im.save('screenshot.png') 

优点: 实现简单 缺点: 对于高度太高的页面会导致文件过大,处理会有问题,我测试的最大图片尺寸是12.8M。

解决图片加载不完整的问题

我们先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图。这样可以解决像上面那种按需加载图片的情况。

from selenium import webdriver import timedef take_screenshot(url, save_fn="capture.png"):  browser = webdriver.Firefox() # Get local session of firefox browser.set_window_size(1200, 900) browser.get(url) # Load page browser.execute_script(""" (function () { var y = 0; var step = 100; window.scroll(0, 0); function f() { if (y < document.body.scrollHeight) { y += step; window.scroll(0, y); setTimeout(f, 100); } else { window.scroll(0, 0); document.title += "scroll-done"; } } setTimeout(f, 1000); })(); """) for i in xrange(30): if "scroll-done" in browser.title: break time.sleep(10) browser.save_screenshot(save_fn) browser.close()if __name__ == "__main__": take_screenshot("")

不同wewbdriver对某些方法的实现不同

Chrome和PhantomJS 的接口差异

抓知乎时的坑, 1. Chrome用WebElement.text可以正常得到值,用PhantomJS只能用 WebElement.get_attribute('innerHTML')

2. WebDriver.Chrome截图只能截当前屏幕区域。WebDriver.PhantomJS截图可以获取整个页面的长图。

上述操作技术这一点点内容可能讲不清楚,而且很多代码都没有详细调出来,如果有想详细了解的读者大大们可以关注我然后私信回复“Python”获取完整内容和其他的一些机器学习、数据挖掘的资料。

标签: #python页面截图 #python 获取网页元素